我想在我的导航栏中添加一个下拉菜单,但我无法正确地做到这一点?任何人都可以帮助我正确地格式化它,以便在悬停时它会正确地下降吗?
HTML:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Me</a></li>
<li><a href="#">Website</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
CSS:
nav {
background-color: #311310;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
position: absolute;
left: 0px;
width: 100%:
}
nav ul li ul li {
background: #311310;
display: block;
}
nav ul{
margin: 0px;
padding: 10px 0px 10px 100px;
}
nav ul li {
color: #d9d9d9;
display: inline;
padding: 0px 10px;
font-family: klavika;
font-size: 14pt;
}
nav ul li a {
color: #d9d9d9;
text-decoration: none;
}
nav ul li a:hover{
color: #ffffff;
}
这是损坏的导航栏快照:
如何在 about 正下方显示嵌套?
最佳答案
将 position: relative;
给父级:
nav ul li {
color: #d9d9d9;
display: inline;
padding: 0px 10px;
font-family: klavika;
font-size: 14pt;
position: relative;
}
和 position: absolute;
到菜单:
nav ul li ul {
background: #311310;
display: block;
position: absolute;
left: 0;
}
关于html - 为什么我的嵌套导航栏不能正常下拉?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25642678/