下拉菜单中的文本忽略IE7中的z索引

Question

问题："第2层"中的子菜单文本位于"第3层"中子菜单文本的前面。奇怪的是，ul没有，只是文本。

http://i41.tinypic.com/ajuhz6.jpg

我知道IE7中有一个与z索引有关的错误。通常在这种情况下，我会在IE7中通过给其中一个外部容器比孩子们更高的z索引来解决这个问题。

如果有人因为有同样的问题而读到这篇文章，我建议先试试：-http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

到目前为止，一切都对我无效，我已经尝试了许多发布在Stack Overflow和其他地方的解决方案。

这是我的密码。。。我有一个简单的分层下拉菜单，具有以下HTML结构：

<div id="wdk_header-container">
<div>...</div>
<div class="wdk_menu-container">
    <ul class="wdk_menu-ul wdk_tier_1">
        <li class="wdk_menu-item wdk_level_1">
            <a href="/"><span>Menu Text</span></a>
            <ul class="wdk_sub_menu wdk_tier_2">
                <li class="wdk_menu-item wdk_level_2">
                    <a href="/"><span>Menu Text</span></a>
                    <ul class="wdk_sub_menu wdk_tier_3">
                        <li class="wdk_menu-item wdk_level_3">
                            <a href="/"><span>Menu Text</span></a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

<div>...</div>
<div>...</div>

</div>

我无法编辑菜单的结构。正如您所看到的，在最外面的容器中还有其他div。

我使用以下jQuery来显示和隐藏菜单层：

$(function(){
$("ul.wdk_menu-ul li").hover(function(){
    $('ul:first',this).css('visibility', 'visible');
}, function(){
    $('ul:first',this).css('visibility', 'hidden');
});
});

以下CSS在Firefox和Chrome中运行良好，但在IE7中则不然。

<style>
/* All Menu Items */
.wdk_menu-container ul {
    list-style: none; display: inline;
    margin: 0px; padding: 0px;
}
.wdk_menu-container ul li {
    float: left; height: 33px; position: relative; display: block;
}
.wdk_menu-container ul li a {
    display: block; height: 100%;
}
/* Sub Menu */
ul.wdk_sub_menu.wdk_tier_2 {
    float: left; z-index: 5; position: absolute;
}
ul.wdk_sub_menu.wdk_tier_2 a {
    line-height: 16px; padding: 6px 10px;
}
.wdk_menu-container ul.wdk_sub_menu.wdk_tier_2 li a span {
    display: inline-block;
}
/* Sub Sub Menu */
ul.wdk_sub_menu.wdk_tier_3 {
    float: left; z-index: 6; position: absolute; left: 34px;
}
</style>

我将为IE7创建一个单独的样式表。欢迎任何建议，这让我发疯。如果您需要更多信息，请询问！非常感谢。

Answer 1

您遇到这个问题是因为您将position:absolute与z-index一起应用于元素。这在IE7中不起作用。您需要使用position:relative（并找到另一种巧妙定位子菜单的方法）。http://www.shawnpreisz.com/css/z-index-internet-explorer-7-ie7