2级CSS下拉菜单-显示：无不起作用

我设计了一个2级CSS下拉菜单。除了一件事，一切都很完美。我希望这样，当我将鼠标悬停在顶部菜单项上时，会出现第一级下拉菜单，当我将鼠标悬停在第一级菜单项中的按下时，会出现第二级菜单项。但问题是，当我将鼠标悬停在顶部菜单上时，所有子菜单都会同时出现。这意味着

显示：none

不起作用。为什么会发生这种情况？解决方案是什么

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>

改变这个

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

对此

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

基本上，

ul#nav li:hover>ul

所做的是，它只针对第二个下拉菜单，因此当您将鼠标悬停在我们周围时，只会显示第二级菜单，而隐藏第三级菜单。

更改此设置

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

对此

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

基本上，

ul#nav li:hover>ul

所做的是，它只针对第二个下拉菜单，因此当您将鼠标悬停在我们周围时，只会显示第二级菜单，而隐藏第三级菜单。

li:hover ul

将应用于所有后代

ul

。将其更改为：

li:hover>ul

应用于直系后代。

此

li:hover ul

将应用于所有后代

ul

。将其更改为：

li:hover>ul

---

应用于直系后代。

使用直接子选择器

---

使用直接子选择器

---

完美。谢谢你的快速回答！完美的谢谢你的快速回答！