[eagle132]

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!

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.

[Kravvitz]

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>
</object>