Html 导航栏下拉列表重叠在内容下
我的CSS导航栏有问题。问题是,子链接位于导航栏下方的div下,阻碍了链接。我不知道如何使导航栏显示在其余内容上而不是下面 您可以在这里看到问题:通过滚动链接1Html 导航栏下拉列表重叠在内容下,html,css,Html,Css,我的CSS导航栏有问题。问题是,子链接位于导航栏下方的div下,阻碍了链接。我不知道如何使导航栏显示在其余内容上而不是下面 您可以在这里看到问题:通过滚动链接1 nav { margin-bottom: 20px; text-align: center; font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; font-weight: bold; text-transform: uppercase
nav {
margin-bottom: 20px;
text-align: center;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
}
nav ul:after {
content:"";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
padding: 15px 40px;
text-decoration: none;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
如果有人能提供任何关于如何解决这个问题的见解,我们将不胜感激 添加一个z索引,使nav看起来像
nav {
z-index: 999;
margin-bottom: 20px;
text-align: center;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
}
这将使导航条始终处于所有位置。此外,它不需要是999,但这是最大值,因此如果添加更多层,您的nav将保持在顶部添加z索引:10;到需要放在上面的元素