Dropdown content hidden behind the following

[PatrickLeahy]

When I roll over a menu item, the drop down items appear behind the following div. I’m not sure if it’s a css issue, a javascript issue, or both. Roll over the first menu item in the navigation and help me figure out what’s happening. Here’s the link:
http://patrickleahydesign.com/everydaymind/
Any help would be appreciated!

[guiniveretoo]

Looking at your code, and playing around in Firebug, I think it has to do with the z-index and positioning. Change this:

ul.dropdown ul li { font-weight: normal; float: none; z-index: 1; }

To this:

ul.dropdown ul li { font-weight: normal; float: none; z-index: 4; position: relative; }

It has to do with the z-index has no effect unless unless you explicitly set the position, and you need to have a z-index value of at least 4 to put it on top of the objects around it. The correct rule for stacking order is that the objects *below* appear *on top* according to spec.
Make sense?

[Author]

Posts