CSS dropdown list showing behind the dropdown belo

Question

I'm facing one of the craziest problems I've ever found in css...

I have two CSS-jQuery horizontal dropdowns, one up and one below, displaying the drop-list when clicking on it.

The problem comes when I click the upper dropdown in IE6 and IE7, and absolute positioned element goes over relative positioned ones. Upper dropdown list (absolute) shows behing the dropdown (relative) below.

JavaScript:

$("button").click(function(e){
    $(".menu").hide();
    $(this).siblings(".menu").show();
    e.stopPropagation()
});
$(document).click(function(){$(".menu").hide()});

HTML:

<div class="top">
    <div class="dropdown">
        <button>Dropdown1 v</button>
        <div class="menu">
            <a href="#link">Option a</a>
            <a href="#link">Option b</a>
            <a href="#link">Option c</a>
        </div>
    </div>
    <div class="dropdown">
        <button>Dropdown2 v</button>
        <div class="menu">
             <a href="#link">Option d</a>
             <a href="#link">Option e</a>
            <a href="#link">Option f</a>
        </div>
    </div>
</div>

CSS:

.dropdown{float:left;display:inline;clear:left;position:relative}
.menu{position:absolute;left:0;top:22px;z-index:1}
.menu  a{display:block}

.menu{display:none;border:1px solid #ccc;padding:3px;background:#ffffe0}

Here's the example:

http://jsfiddle.net/AEBaW/

SOLUTION HERE:

http://jsfiddle.net/AEBaW/2/

Answer 1

There is a known issue with z-index in IE. It treats z-index differently for absolute positioned elements than it does for relative positioned elements. It's like you have two sets of z-indexes. You might be able to fix it by using wrappers with the same positioning, if you cannot get all your elements to use the same positioning.

EDIT 1:

http://caffeineoncode.com/2010/07/the-internet-explorer-z-index-bug/

EDIT 2:

z index bug

Z-Index IE bug fix?

Internet Explorer z-index bug?

EDIT 3:

jQuery Solutions:

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

http://webdeveloper2.com/2010/01/how-to-fix-the-ie-z-index-bug-with-jquery/

Answer 2

When I had to work with IE z-index issues the best solution I found was making sure that every single container was part of the same stacking-index. Meaning, all elements act as layers of the same stack. That's usually what makes IE act funny.

You can do this by adding position:relative; z-index:auto; to all of the containers. You want to do this all the way up the line if possible. This should force IE to consider everything one stack, thus layering properly.