我想创建一个有 3 级的下拉菜单，我已经完成了典型的一项工作，当我将鼠标悬停在主要元素上时，我可以看到第二级元素。现在的问题是我也可以看到第三级元素，我希望让第三级元素只有在我将鼠标悬停在第二级元素时才能看到，以使其更好。我从 http://www.alistapart.com/articles/horizdropdowns/ 中获取了代码并对其进行修改。
这是我的 file.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="css_menu.css" />
</head>
<body>
<div id="menu">
<ul class="formato">
<li class="n-dos"><a class="menu" href="#">Home</a></li>
<li class="n-dos"><a class="menu" href="#">About</a>
<ul class="test">
<li class="n-tres"><a class="menu" href="#">History</a></li>
<ul class="variacion">
<li><a class="menu" href="#">Ejemplo_1</a></li>
<li><a class="menu" href="#">Ejemplo_2</a></li>
</ul>
<li class="n-dos"><a class="menu" href="#">Team</a></li>
<li class="n-dos"><a class="menu" href="#">Offices</a></li>
</ul>
</li>
<li class="n-dos"><a class="menu" href="#">Services</a>
<ul class="test">
<li class="n-dos"><a class="menu" href="#">Web Design</a></li>
<li class="n-dos"><a class="menu" href="#">Internet Marketing</a></li>
<li class="n-dos"><a class="menu" href="#">Hosting</a></li>
<li class="n-dos"><a class="menu" href="#">Domain Names</a></li>
<li class="n-dos"><a class="menu" href="#">Broadband</a></li>
</ul>
</li>
<li class="n-dos"><a class="menu" href="#">Contact Us</a> </li>
</ul>
</div>
</body>
</html>
和我的 CSS:
.formato
{
margin:0;
padding:0;
list-style-type:none;
}
.n-dos
{
display:inline;
background-color:black;
}
.n-tres
{
display:inline;
background-color:black;
}
.test
{
position: absolute;
left: 120px;
top: 35px;
display: none;
}
.variacion
{
position: absolute;
top: 30px;
left: 120px;
display: none;
margin:0;
padding:0;
list-style-type:none;
}
.menu
{
float:left;
text-decoration:none;
color:white;
background-color:#000000;
padding:0.3em 0.6em;
text-align:center;
width: 150px;
font-family: 'Trebuchet MS';
}
li.n-dos:hover ul.test
{
display:inline;
}
li.n-tres:hover ul.variacion
{
display:block;
}
最佳答案
我很确定您不想为这些东西设置元素级选择器。使用像
这样的选择器li ul
{
position: absolute;
left: 120px;
top: 35px;
display: none;
}
和
ul li a
{
float:left;
text-decoration:none;
color:white;
background-color:#000000;
padding:0.3em 0.6em;
text-align:center;
width: 150px;
font-family: 'Trebuchet MS';
}
您的样式规则方式过于具体。这是您绝对应该使用类选择器处理的事情。顺便说一句，如果你不让你的 anchor 标签显示: block ，你就不会得到像宽度和填充和文本对齐等规则来表现。
关于html - 下拉菜单不同级别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3136951/