Question

我正在使用无序列表为我的页面编写下拉导航，但列表项显示了它们背后的元素。

What I'm talking about

查看hr如何通过子菜单显示？这就是我不想要的。

我已经尝试了所有相关元素的z-index，并分配背景颜色，但这似乎不起作用。我觉得我错过了一个简单的解决方案。

相关的Html

    <ul id="menu" class="topNavListLeft">
        <li class="headlink">@Html.ActionLink("Home", "Index", "Home")
            <ul>
            <li>@Html.ActionLink("Home", "Index", "Home")</li>
            <li>@Html.ActionLink("About", "About", "Home")</li>
            </ul>
        </li>

        <li class="headlink">@Html.ActionLink("About", "About", "Home")
            <ul>
            <li>@Html.ActionLink("About", "About", "Home")</li>
            <li>@Html.ActionLink("Home", "Index", "Home")</li>
            </ul>
        </li>
    </ul>
</div>
<div>
<br />
<hr style="position:relative; top:-25px; color:Gray; background-color:Gray; height:3px" />
</div>

编辑：这也是我的CSS的几个部分。

.nav a:active, .nav a:hover {
    color:#1ba1e2;
}
ul.topNavListLeft {
    white-space:nowrap;
    padding-top:50px;
    min-height:35px;
    width:100%;
}
.topNavListLeft > li {
    float:left;
    font-size:18px;
    padding-right:50px;
    height:35px;
    display:block;
}
.topNavListLeft div 
{
    float:left;
    white-space:nowrap;  
    padding-right:60px; 
}
.topNavListLeft li ul
{
    display:none;
    z-index:20;
}
.topNavListLeft a {
    display:block;
    z-index:20;
}
.topNavListLeft a:hover, .topNavListLeft li.current a {
    border-bottom:solid 6px #1ba1e2;        
}
.topNavListLeft li:hover ul
{
    display:block;
}
ul {
    list-style: none;
}
.content {
    text-align:left;
    width:903px;
    margin:0px 40px 0px 40px;
}
.body {
    margin:0px auto;
    width:981px;
    text-align:center;
    background-color:#fff;
    color: #666666;
    min-height:101%;
    position:relative;
    font-size:14px;
    font-family:'Segoe UI',arial,helvetica;
}
a {
    text-decoration:none;
    color:Gray;
}
a:link, a:hover {
    color:#1ba1e2;
}

Answer 1

我认为你需要它：

.headlink{
position:relative;
}
.headlink ul{
position:absolute;
display:block;
left:0;
top:25px /*You'll need to play with this number*/
}

Answer 2

试试这个：Looking for a Menu System like Bonobos.com

下拉列表在IE9和FF中显示其后面的元素

2 个答案: