Question

我正面临着我在css中遇到过的一个最疯狂的问题......

我有两个CSS-jQuery水平下拉列表，一个在上面，一个在下面，在点击时显示下拉列表。

当我点击IE6和IE7中的上部下拉列表时出现问题，并且绝对定位元素超过相对定位的元素。上限下拉列表（绝对值）显示下面的下拉列表（相对）。

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}

以下是示例：

http://jsfiddle.net/AEBaW/

解决方案：

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