jQuery Menu IE Z-Index Bug

Superfish jQuery Menu IE Z-Index Bug

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

Here the content

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 simple:

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:

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

Leave a Reply

Your email address will not be published. Required fields are marked *