1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2010
    Rep Power

    Question A Messed up CSS Drop Down Menu

    I'm trying to make a simple css dropdown menu for one link in my nav bar.

    The website is:

    If you hover above "Products", you should see a drop down, but a few of the below layers overlap it, including the flash object, which cuts off submenu items.

    It seems to me that the rest of the page is overlapping the dropdown menu when you hover over it, so as soon as you leave the little box that you originally hover over to see the submenu, the rest of the menu disappears.

    Also, none of the other links work yet either because I was just trying to get this dropdown to work initially.

    Any help is greatly appreciated!

    EDIT: I added a z-index to the hidden drop down menu and it seems to have fixed my problem. Was this a good solution or should I be doing something else?
    EDIT #2: Scratch that it only seems to work in FF, and in IE the flash object blocks the menu still.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    USA (verifiably)
    Rep Power
    That's the purpose of the z-index property -- to control which layers appear above and below other layers. So, yes that solution is a good one.

    Why it's not working in IE but is in FF is that the wmode property is set for the <embed>, but not the <object>.

    Try this:
    <object width="453" height="380">
    	<param name="movie" value="carousel.swf">
    	<param name="wmode" value="transparent">
    	<embed src="carousel.swf" width="453" height="380" wmode="transparent"></embed>
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo