我正在创建一个带有子类别的下拉菜单，每个子类别都有另一个子类别。例如，当用户将鼠标悬停在图像上时，将出现一个下拉菜单，当鼠标放在类别“颜色”上时，应出现另一个包含 3 种颜色的下拉菜单。但是，我无法显示具有 3 种颜色的下拉菜单。我怀疑这是因为我没有在我的 CSS 文件中正确跟踪标签。有人可以告诉我我做错了什么吗？谢谢。
这是我的 HTML 代码:
<body>
<ul id="coolMenu">
<li>
<a href="#"> <img src = "gear_icon.png"
class = "nav" height = "20px" width = "20px">
</a>
<ul>
<li>
<a href = "#"> Colors </a>
<ul>
<li><a href = "#"> Blue </a></li>
<li><a href = "#"> Green </a></li>
<li><a href = "#"> Red </a></li>
</ul>
</li>
<li><a href="#">Background</a></li>
<li><a href="#">Indulgentia</a></li>
</ul>
</li>
</ul>
</body>
这是我的 CSS 代码:
#coolMenu, #coolMenu ul {
list-style:none;
}
#coolMenu {
float:left;
}
#coolMenu > li {
float:left;
}
#coolMenu li a {
display:block;
height: 2em;
line-height:2em;
padding: 0 1.5em;
text-decoration:none;
}
#coolMenu ul {
position:absolute;
display:none;
z-index: 999;
}
#coolMenu li:hover ul {
display:block;
}
#coolMenu ul li ul li{
position:absolute;
display:none;
z-index:999;
}
#coolMenu li ul li:hover a {
display:block;
}
最佳答案
你是说这种风格吗
#coolMenu li > ul > li:hover > ul {
display: block;
position: absolute;
left: 110px;
top: 0px;
}
关于html - 下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24131601/