CSS第三级菜单

我缺少实现三级css菜单的功能

我的html是

<div class="menu">
 <ul>
  <li class="two"><a href="#" class="title"><span class="icon_has_child">Browse Products</span></a>
   <ul id="two_menu">
    <li><a href="#">Brand Directory</a>
     <ul>
      <li><a href="#">New Brand Directory 1</a></li>
      <li><a href="#">New Brand Directory 2</a></li>
     </ul>
    </li>
    <li><a href="#">Store Directory</a></li>
    <li><a href="#">New Arrival</a></li>
   </ul>
  </li>
 </ul>
</div>

您可以在此处看到测试站点（在顶部菜单上单击“浏览产品”）

---

当我将鼠标悬停在“品牌目录”上时，如何仅显示“新品牌目录”？

尝试此订单，它将帮助您

DIV

<div class="menu">
    <nav>
 <ul>
  <li class="two"><a href="#" class="title"><span class="icon_has_child">Browse Products</span></a>
   <ul id="two_menu">
    <li><a href="#">Brand Directory</a>
     <ul>
      <li><a href="#">New Brand Directory 1</a></li>
      <li><a href="#">New Brand Directory 2</a></li>
     </ul>
    </li>
    <li><a href="#">Store Directory</a></li>
    <li><a href="#">New Arrival</a></li>
   </ul>
  </li>
 </ul>
    </nav>
</div>

---

一种方法是首先隐藏所有三级菜单，然后将它们显示在父li的悬停位置：

.menu ul ul ul {
    display: none;
}

.menu li:hover > ul{
    display: block;
}

尝试添加：

.menu li.two ul li ul li {display:none;}

之后

---

好的，您的第二组

：hover

不会操纵元素的可见性/显示值，因此显然它不会做很多事情。我会把

：hover

也放在

ul

元素上。

.menu ul ul ul {
    display: none;
}

.menu li:hover > ul{
    display: block;
}

.menu li.two ul li ul li {display:none;}

.menu li.two ul li a { background:none; color:#606060; padding-left:31px; display:block;}