IE z-index bug with CSS dropdown menu

Standards-aware web designers generally know of the z-index bug in all versions of Internet Explorer (though, version 8 is rumored to fix it).

In the W3C’s specs, z-index is designed to affect the stacking order of positioned elements on a web page. So, an element with a z-index of 2 should always appear above an element with a z-index of 1.

In Internet Explorer, this doesn’t work like it should. Internet Explorer resets the stack when the positioned elements are separated from each other.

It works fine with IE8, FF etc. However IE7 has a problem to show submenus. It shows the submenu but when I try to navigate in the submenu, it fades out.

The Fix

The fix for this is very simple, but there are incredibly large websites that use jumbled masses of iframes, extra divs, and other horrors to get Internet Explorer to display the dropdowns above the offending elements.
For a fix, we use the following CSS for the header div. See the screenshot for an example of this (again, in IE7). Click it to see a larger version.

2. div#menu {
3.     height: 42px;
4.     padding-left: 24px;
5.     background: url(images/left.png) no-repeat;
6.     _background: url(images/left.gif) no-repeat;
7.     width:auto;
8.     border-top: 1px solid #D0D0D0;
9.     border-bottom : 1px solid #D0D0D0;
10.     margin-left:330px;
11. position:relative;
12. top:25px;
13. z-index:4;
14.     
15. }

Now, you will also need to make sure that your container div, whatever it is called, is styled correctly. In my example:

1. #wrapper #container {
2. position: relative;
3. }

This ensures that the header and the container, whatever you call them, understand their relationship to each other for the z-index fix to work.