I am adding Superfish, a great jQuery drop-down menu to my monoshade theme. After I changed the colours and test it in MSIE, I found that the dropdown menu appear under the floating DIVs (content and sidebar), which causes the link to be unclickable.

It is actually a bug with z-index in MSIE, it is so famous that it was given a name – the “Z-index Bug”.

Simple Fix

After reading the posts out there (links below), I got the problem fixed by adding simple CSS z-index and position:relative.

This is my HTML structure:

<div id="navbar">my menu</div>
<div id="content"></div>
<div id="sidebar"></div>

I added these CSS and it was fixed.

#navbar { position:relative; z-index: 2; }
#content,#sidebar { z-index: 1; }

Explaination:
I gave the DIV with superfish menu a z-index of 2 and position:relative.
For other DIV elements near it, they were given z-index of 1.

Before the fix

After the fix

Related Posts:
- Superfish jQuery Menu IE z-index Bug