我正在使用无序列表为我的页面编写下拉导航,但列表项显示了它们后面的元素。
看看小时是如何通过子菜单显示的?这是我不想要的。
我试过为所有涉及的元素弄乱 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/