0

我正试图解决一个我现在盯着一个小时的问题。我正在处理这个页面，我的问题出在菜单上。

我有一个导航列表，其中包含一个特殊的绝对定位列表项（#magic-line），以在悬停其他项目（使用 jQuery）时形成背景，以提供良好的效果。问题是它一直停留在导航列表项的前面，导致错误行为。

我一直在给导航列表项和其中的锚点一个 z-index 200，同时给绝对定位的列表项一个 z-index 100。据我所知，这应该可以立即解决问题。但显然它没有。我可能忽略了一个生硬的细节。希望你们能给这个新的亮点。

HTML 如下所示：

<nav>
    <ul class="group">
        <li class="current"><a href="/v3/" data-section="#start">Home</a></li>
        <li><a href="/v3/over-mij/" data-section="#over-mij">Over Mij</a></li>
        <li><a href="/v3/portfolio/" data-section="#portfolio">Portfolio</a></li>
        <li><a href="/v3/inspiraties/" data-section="#inspiraties">Inspiraties</a></li>
        <li><a href="/v3/contact/" data-section="#contact">Contact</a></li>
        <li id="magic-line" style="width: 63px; height: 48px; left: 0px; overflow: hidden;"></li>
    </ul>
</nav>

影响这个 HTML 的 CSS 部分是：

nav{
    color: #edebe6;
    font-size: 1.2em;
}
nav ul{
    padding: 0;
    list-style: none;
    display: block;
    position: relative;
}
nav ul li{
    float: left;
    z-index: 200;
}
nav ul li a{
    color: #edebe6;
    text-decoration: none;
    display: block;
    float: left;
    padding: 10px;
    border: none;
    z-index: 200;
}
nav ul li a:hover{
    background-color: transparent;
}
nav #magic-line{
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    background-color: #d3643b;
    z-index: 100;
}
4

1 回答 1

1

经过测试，如果您position: relative在菜单项上进行设置，它会按预期工作。

nav ul li a {
    border: medium none;
    color: #EDEBE6;
    display: block;
    float: left;
    padding: 10px;
    position: relative;
    text-decoration: none;
    z-index: 200;
}

这些项目没有考虑 z 顺序。

于 2012-11-28T14:13:01.380 回答