我对这个菜单进行了编码，我也尝试过其他方法，但在我看来，我无法定位第二个 ul 列表和 il 元素以显示下拉菜单，任何人都可以看到问题吗这段代码？
非常感谢!
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="nav">
<div id="wrapper">
<ul>
<li>About</li>
<li>News</li>
<li>Artists</li>
<ul>
<li>Kasi</li>
<li>Sin</li>
<li>WORDUP</li>
</ul>
<li>Videos</li>
<li>Store</li>
</ul>
</div>
</div>
</body>
</html>
CSS:
body {
padding: 0;
margin: 0;
font-size: 20px;
}
#nav {
background-color: #222;
color: #FFF;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li {
display: inline-block;
padding: 5px 25px;
}
#nav ul li:hover{
color: #FFDF00
}
#nav ul li:hover ul{
display: block;
}
#nav ul ul{
display: none;
position: absolute;
}
最佳答案
您的嵌套 ul 需要在 li 中。只有 li 可以是 ul 的直接子代。
然后使用 CSS 默认隐藏嵌套的 ul，然后当您将鼠标悬停在 li 上时，显示任何嵌套的 ul一个直接的 child 。
ul ul {
display: none;
}
li:hover > ul {
display: block;
}<ul>
<li>About</li>
<li>News</li>
<li>Artists
<ul>
<li>Kasi</li>
<li>Sin</li>
<li>WORDUP</li>
</ul>
</li>
<li>Videos</li>
<li>Store</li>
</ul>关于html - 无法为下拉菜单定位 ul 和 li 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42168449/