Position relate + z-index = IE bug
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
In Internet Explorer, this doesn’t work like it should. Internet Explorer resets the stack when the positioned elements are separated from each other.
HTML code:
<ul class="sf-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Typography</a></li>
<li><a href="#">Colors</a></li>
<ul>
<li><a href="#">Red color</a></li>
<li><a href="#">Blue color</a></li>
<li><a href="#">Green color</a></li>
</ul>
<li><a href="#">Layout</a></li>
</ul>
Css Code:
ul.sf-menu li {
position: relative;
}
ul.sf-menu li:hover ul {
position: absolute;
z-index: 99;
left: auto;
top: 3em;
}
My problem:
The dropdown menu appear below the slideshow In IE7, IE6.
|
FireFox |
IE6, IE7 |
My solusion:
add z-index: 1; for parent elements:
ul.sf-meu li {
position: relative;
z-index: 1;
}