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

标签 html css drop-down-menu

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

What I'm talking about

看看小时是如何通过子菜单显示的?这是我不想要的。

我试过为所有涉及的元素弄乱 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;
}

最佳答案

我认为你需要它:

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

关于html - 下拉列表在 IE9 和 FF 中显示其后面的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5720486/

相关文章:

javascript - 在保持可排序性的同时更改 JqueryUI 可排序元素的类

css - 将 css 类应用于所有实例

javascript - 在折叠 jQuery 中显示结果

asp.net-mvc - DropDownList 在asp.net MVC 中设置选中项

html - 为什么这个菜单导航 <div> 没有居中对齐?

php - 用 PHP 读取 Yaml

html - 如何将 html 元素(div 或段落)放在 2 个 boostrap 列的中心?

javascript - 单击下拉菜单中的项目时,jQuery 不会触发

javascript - 避免在第一次更改后更改选择标签

html - 覆盖 CSS 样式