IE dropdown z-index bug

Question

I'm having a problem with a dropdown menu under IE (6 and 7).

http://www.amaconsulting.pl/promocje.html

As you can see, the dropdown hides behind the main content area in IE.

It's a known bug and general advice is to set a z-index for header and content areas, so IE knows their "place", explained in the article here: http://bit.ly/coSPcI

I've set the z-index of .header div to 20 and .featured, .content, .primary, .main to 1, trying to find the right div to fix the problem. While the dropdown stopped hiding behind the .featured div, it still hides behind the main content divs (either .primary or .main, .secondary is fine).

The z-indexes for these divs are set in a separate stylesheet, ie.css, in case someone'll be looking for them.

If someone could provide some advice, I'd be very grateful.

Answer 1

In IE if an absolutely positioned element has a z-index then it’s containing relatively positioned element must specify a z-index (z-index:1) in order for the absolutely positioned element to be able to appear on top of other relatively positioned elements.

So I think that you need to give your ul.nav a z-index of 1. I actually wrote about this on my blog.

Updated: So if I change the visibility style of the hidden ul to visible it appears above the div as it should as long as ul.nav has a positive z-index value. Therefore, I think that this has something to do with the way your JS renders the dropdown menu from that hidden UL. Unless I have all your HTML/CSS/JS I can't really solve this so I can only point you in the right direction and I think that understanding this page will help you a lot.