A Messed up CSS Drop Down Menu

HTML & CSS
1

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

The website is:
http://www.blanchetrocker.com/

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!

2

Hi,

Ultimately (in IE) it’s the positioned parent that controls the stacking level of its children so ensure the parent that holds the menu has a higher z-index than the elements underneath (if the main parent isn’t positioned add position:relative to it.)


#navBarExtend {
    width: 100%;
    background-color: #339966;
    position:relative;
[B]    z-index:99[/B]
}

Set the images in your header to display:block to cure the gap or close the whitespace between the image html and the closing div.

BTW there was no need to slice that logo into 4 bits and you could have used one image and just pulled it it not position with margins as required.

3

UPDATE: 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?
UPDATE #2: Scratch that it only seems to work in FF, and in IE the flash object blocks the menu still.