Question

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

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

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

如果有人正在阅读此内容，因为他们有相同的问题，我建议先尝试一下： - 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

你有这个问题，因为你有位置：绝对应用于元素和z-index。这在IE7中不起作用。您需要使用position：relative（并找到另一种方法来巧妙地定位子菜单）。 http://www.shawnpreisz.com/css/z-index-internet-explorer-7-ie7

下拉菜单中的文本忽略了IE7中的z-index

1 个答案: