2 Replies Latest reply on Jun 2, 2010 2:51 PM by Derek Toigo

    Displaying drop down menu lists on :hover

    Derek Toigo

      I'm currently trying to implement a drop down menu into my website. My site is at http://www.derektoigo.com/assets/livesites/deploy/index.html (CSS - http://www.derektoigo.com/assets/livesites/deploy/css/style.css )

       

      I've been working with CSS for a while and can employ mosts techniques, but this is my first time attempting to implement a drop down menu. The main reason I'm here is because I'm looking to better understand why my menu won't display at all and how to overlay these lists over other positioned objects on the page. I'd like to have my menu display horizontally in the black bar on the top of the page and have the ul's in the li's (drop downs) display when I hover over a menu link with some margin (about 30px) to the right of each link. Additionally I find that when I hover my mouse over a link unless both it and its drop down lists have a fixed width, the menu item will "jump" to the side; if possible instead I'd be interested in using flexible width for each menu item and just keeping the drop down lists set to a fixed width, but I don't know how to employ this without the margins being messed up. I'm also concerned about the slider region I implemented being pushed down as a result of the menu not being in the header bar.

       

      I know this is kinda vague but to be honest I'm really not sure what to explain than otherwise just showing it to you, so if anyone can show me what I'm (not) doing in my CSS that should be different it would be really appreciated. Thanks so much.