Internet Explorer 7 z-index bug

A common problem with an easy solution. It looks that IE7 doesn’t use properly the z-index so if you have something like this:

<ul>
<li><a href=”">Show List</a></li>
<li style=”position:relative; display:none;”>
<ul style=”position:absolute; top:0; left:0; z-index:100;“>
<li>Item List</li>
<li>Item List</li>
</ul>
</li>
</ul>
<img style=”position:absolute; z-index:99;” src=”test.jpg” alt=”" />

And the image appears over the hidden menu when you show it, you have to put a higher z-index to the parent and it will be fixed.

<ul style=”z-index:101;“>
<li><a href=”">Show List</a></li>
<li style=”position:relative; display:none;”>
<ul style=”position:absolute; top:0; left:0; z-index:100;“>
<li>Item List</li>
<li>Item List</li>
</ul>
</li>
</ul>
<img style=”position:absolute; z-index:99;” src=”test.jpg” alt=”" />