我创建了一个带子类别的下拉菜单,每个子类别都有另一个子类别。例如,当用户将鼠标悬停在图像上时,会出现一个下拉菜单,当鼠标放在categeory" Color"上时,另一个下拉菜单应显示为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;
}
答案 0 :(得分:1)
看一下这个例子:jsfiddle。它只使用HTML&amp; CSS。
HTML
CSS
ul > li {display: block; float: left; margin-right: 10px; position: relative; background: Red; padding: 0.5em; line-height: 1em}
ul ul {display: none; width: 150px; position:absolute; top: 2em; left: 0}
ul ul > li {float: none;}
ul > li:hover > ul,
ul > a:hover + ul {display: block}
答案 1 :(得分:1)
你的意思是这种风格
#coolMenu li > ul > li:hover > ul {
display: block;
position: absolute;
left: 110px;
top: 0px;
}