As a good and stable dropdown menu I’m using the Superfish jQuery menu plugin by Joel Birch. Superfish is an enhanced Suckerfish-style menu jQuery plugin that is quite easy to customize. With a lot of options it can be tailored to your needs. But thanks to our friend IE you might experience the z-index bug. The fix is very simple!

The IE z-index issue:

I really like this dropdown menu and in Firefox (as almost always) everything worked properly. But then I tested in IE. The source code was similar to this

<div id='header'>
    <div id='nav' class='sf-menu'>Here the menu</div>
</div>
<div id='content'>Here the content</div>

Both the header and the content div have position:relative. In IE the dropdown menu was displayed under the content div so the links in the dropdown were not clickable though the z-index of the menu list was set to 100.

The fix is so simpel:

After a bit of research I came accross the IE z-index Bug on Klog – php, linux, ajax, javascript. On this page Kae Verens describes the bug and gives an example. But the solution was some kind of unsatisfactory for me. But one of the commenters – Michael – posted a very simple solution.

You do not have to set the z-index on the menu or its children but on the two position:relative elements header and content (in my example). So I set:

#header {
    z-index:2;
}
#content {
    z-index:1;
}

and the problem was fixed! Thanks to Michael. This is basic CSS knowledge, but once you dived into the menu’s css it is hard to see

Relevant Links:

• Superfish – Suckerfish on ‘roids
• Download – Superfish
• Support – jQuery Mailing List
• Tutorial: jQuery Dropdown Menü mit Superfish (German)