我的 CSS 导航栏有问题。问题是子链接位于导航栏下方的 div 下,阻碍了链接。我不确定如何让导航栏显示在其余内容之上而不是之下。
您可以在此处查看问题:http://nellyswritingroom.tumblr.com/通过滚动链接 1。
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-index 使导航看起来像
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 但这是最大值所以如果你添加更多层你的导航将保持在顶部
关于html - 导航栏下拉菜单在内容下重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16873220/