0

我设计了一个 2 级 CSS 下拉菜单。一切都很完美，除了一件事。我想要它，以便当我将鼠标悬停在顶部菜单项上时，会出现第一级下拉菜单，当我将鼠标悬停在该项目上时，请在第一级菜单中按下，然后出现第二级菜单项。但问题是当我将鼠标悬停在顶部菜单上时，所有子菜单都会出现。这意味着display: none不起作用。为什么会发生，解决方案是什么？

jsfiddle.net

HTML 代码

<ul id="nav">
 <li><a href="/ueber_uns.htm">About Us</a>
  <ul>
    <li><a href="#">Who We Are</a></li>
    <li><a href="#">Our Goals</a></li>
    <li><a href="#">Our Team</a></li>
    <li><a href="#">Press</a>
     <ul>
      <li><a href="#">2006</a></li>
      <li><a href="#">2007</a></li>
      <li><a href="#">2008</a></li>
     </ul>
    </li>
   <li><a href="#">Impressum</a></li>
  </ul>
 </li>
</ul>

CSS 代码

ul#nav 
{
margin: 0;
padding: 0;
list-style: none;
text-align: center;
/*display: table-cell;
vertical-align: middle;*/
}
ul#nav li
{
float: left;
position: relative;
font-size: 16px;
background-color: orange;
}
ul#nav li li
{
font-size: 14px;
}
ul#nav ul 
{
margin: 0;
padding: 0;
list-style: none;
text-align: left;
display: none;
}
ul#nav li:hover ul 
{
display: block;
position: absolute;
}
ul#nav a:link, ul#nav a:visited
{
display: block;
width: 110px;
padding: 10px 5px;
text-decoration: none;
color: #000;
}
ul#nav ul a:link, ul#nav ul a:visited 
{
width: 135px;
}
ul#nav a:hover, ul#nav a:active
{
color: #fff;
}
ul#nav ul ul
{
position: absolute;
top: 0;
left: 100%;
display: none;
}
ul#nav ul li:hover ul
{
display: block;
}
4

3 回答 3

2

改变这个

ul#nav li:hover ul 
{
display: block;
position: absolute;
}

对此

ul#nav li:hover > ul 
{
display: block;
position: absolute;
}

例子

基本上ul#nav li:hover > ul它只针对二级下拉菜单，所以当你将鼠标悬停在我们身上时，只会显示二级菜单，而隐藏第三级菜单。

于 2012-07-07T12:16:14.883 回答
1

这

li:hover ul

将适用于所有后代ul。将其更改为：

li:hover>ul

适用于直系后代。

于 2012-07-07T12:21:13.227 回答
0

使用直接子选择器>

http://jsfiddle.net/2J4e3/2/

于 2012-07-07T12:25:13.347 回答