z-index在CSS下拉菜单中无效

Question

z-index在CSS下拉菜单中无效

cssz-indexdrop-down-menu

4

我有一个基于CSS的简单下拉菜单，可以在较窄的屏幕上呈现为双行。

当我激活顶部行项目之一的下拉菜单时，下拉菜单出现在与底行相同的“Z”级别上。

我认为我已按要求设置了z-indexes，但它在Chrome、Firefox、Safari或iPhone中无法正常工作。

这是一个示例：http://jsfiddle.net/bNBp3/ - "Meat" 有一个附加的下拉菜单。

<ul id="main-navigation">
    <li><a href="/" title="Go to the Home page"><span>Home</span></a>
    </li>
    <li><a href="/meat/" title="Go to the Meat page"><span>Meat</span></a>
        <ul>
            <li><a href="/meat/bacon/" title="Go to the Bacon page"><span>Bacon</span></a></li>
            <li><a href="/meat/ham/" title="Go to the Ham page"><span>Ham</span></a></li>
            <li><a href="/meat/pork/" title="Go to the Pork page"><span>Pork</span></a></li>
        </ul>
    </li>
    <li><a href="/vegetables/" title="Go to the Vegetables page"><span>Vegetables</span></a>
    </li>
    <li><a href="/about-us/" title="Go to the About Us page"><span>About Us</span></a>
    </li>
    <li><a href="/contact-us/" title="Go to the Contact Us page"><span>Contact Us</span></a>
    </li>
    <li><a href="/a-z/" title="Go to the A-Z page"><span>A-Z</span></a>
    </li>
</ul>

ul#main-navigation {
    display:block;
    border-bottom:1px solid #ccc;
    margin:0 auto 0px auto;
    min-height:21px;
    padding:0;
    width:100%;
    z-index:11;
    clear:both;
}
ul#main-navigation li {
    display:block;
    float:left;
    list-style:none;
    margin:0 5px 0 0;
    padding:0;
    position:relative;
    z-index:12;
    min-height:22px;
    min-width:30%;
}
ul#main-navigation li a {
    color:#000;
    display:block;
    padding:2px;
    text-decoration:none;
    z-index:13;
}
ul#main-navigation li a.current, ul#main-navigation li a.section {
    color:#fff;
}
ul#main-navigation li ul {
    background:#eee;
    position:absolute;
    left:-1px;
    top:21px;
    display:none;
    overflow:hidden;
    padding:0px;
    z-index:14;
    width:100%;
    border:1px solid #ccc;
}
ul#main-navigation li ul li {
    display:block;
    float:none;
    margin:0;
    z-index:15;
    width:100%;
    border-bottom:1px solid #ccc;
}
ul#main-navigation li ul li a {
    background:#eee;
    display:block;
    color:#333;
    z-index:16;
    zoom:100%;     
}
ul#main-navigation li ul li a:hover {
    background:#fff;
}
ul#main-navigation li:hover {
    background:#eee;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
}
ul#main-navigation li:hover a.current {
    background:#eee; color:#000;
}
ul#main-navigation li:hover ul {
    display:block;
}

- BaronGrivet

我正在处理这个问题，我认为它与您没有使用<div>标签有关。 - Ryan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wesley Murch · Accepted Answer

只需删除所有的z-index值，它就能正常工作：

http://jsfiddle.net/bNBp3/12/

在Chrome和Firefox6中测试通过。

编辑：看起来我忘记在演示中删除ul#main-navigation li ul的z-index，这就是它能工作的原因，所以只需将其设置为任何值1或更高即可。