ie7 z-index issue on subnav

HTML & CSS
1

Issue site: http://www.usjbruins.org/

Trying to set up a basic rollover nav using nest <ul> on each <li> which contains an image. Works fine everywhere but ie6/7. Seems there’s a pretty well known ie7 z-index bug, but the common fixes either don’t work, or really can’t be applied here. I’ve tried manually added z-index declarations to every single element in the top/sub nav structure, and no luck… subnav still goes behind the next image.

Does anyone have ideas on a fix for this? One published solution was to move all of the subnavs to the bottom of the source code, so IE forces it a higher zindex, but I can’t do that for both semantics reasons, as well as needing the parent <li> for it’s relative position to position the subnav.

Thanks in advance, this is driving me crazy.

Rich

2

Hi Welcome to Sitepoint - the home of all css fixes :slight_smile:

Try this:


#main-nav li.parent:hover {z-index:99999!important;min-height:0}

We raise the z-index on hover so that it’s higher than the others and also make sure it has “haslayout” using the min-height trigger.

I assume you aren’t supporting IE6 though?

3

Awesome, that fixed it. Thanks a bunch! And right, no ie6 needed.