Question

我有一个菜单使用嵌套的无序列表来显示辅助下拉菜单的外观。这在大多数情况下都很有效。我最近重构了CSS代码，使我更清楚，更容易理解，但现在我似乎无法让二级（下拉菜单）显示在顶级菜单后面。两个元素都有声明的位置。

HTML非常简单，我认为这里没有任何问题：

<div id="header-menu">
    <ul>
        <li><a href="#">what</a></li>
        <li><a href="#">what</a>
            <ul>
                <li><a href="#">what</a></li>
                <li><a href="#">what</a></li>
                <li><a href="#">what</a></li>
            </ul>
        </li>
        <li><a href="#">what</a></li>
        <li><a href="#">what</a></li>
        <li><a href="#">what</a></li>
    </ul>
</div>

然而，CSS正在做我不太懂的事情。

    #header-menu > ul > li {
        font-size: 2em;
        display: inline;
        position: relative;
        }

    #header-menu > ul > li:hover {
        background: #a4b0ac;
        padding: 25px 0;
        }

    #header-menu > ul > li > a {
        padding: 25px;
        position: relative;
        z-index: 100;
        }

    #header-menu li > ul {
        display: none;
        position: absolute;
        z-index: 99;
        background: #CC6601;
        }

    #header-menu li:hover > ul {
        display: block;
        }

    #header-menu li ul > li {
        font-size: 0.8em;
        display: block;
        position: relative;
        }

    #header-menu li ul > li a {
        padding: 10px;
        display: block;
        }

    #header-menu li ul > li a:hover {
        background: #a4b0ac;
        display: block;
        }

Answer 1

我在Windows上的Firefox 3.6中对此进行了测试，看起来效果很好。也就是说，辅助菜单出现在主菜单下。也许你可以给我们一个你所看到的截图？

干杯，斯科特

Answer 2

编辑：最初误读了你的问题。

你不能在以这种方式嵌套的元素上放置不同的z索引（z-indices？），因为在其余部分显示时，一个元素内部不能隐藏在自身后面。您必须取消嵌套这些，然后应用z-index，或删除应用于<a>的第一个z-index中的冲突引用。

Answer 3

我查看了IE7，FF3.5和Chrome（4.0.249.8）。

在Chrome中显示效果很好（在第二个菜单项下拉下），在IE7中，下拉菜单位于第三个菜单项下，而在FF中，它位于第一个菜单项下。这是问题的一部分吗？如果是，我认为这是一个“位置”（相对/绝对）问题与“z指数”问题。

另外，关于z-index，我相信只要你改变层次结构中的位置，IE就会重置z-index堆栈。在您的示例中，css从“relative”更改为“absolute”。也许这与它有关？

为什么我的z-index声明不起作用？

3 个答案: