CSS第三级菜单

Question

我失去了一些东西来实现第三层次的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> 

和CSS是

.menu li.two{position:relative;} 
.menu li.two #two_menu{ display:none;} 
.menu li.two:hover #two_menu{ display:block;} 

.menu li.two ul { width:190px; position:absolute; left:0; top:39px; padding-bottom:8px;} 
.menu li.two ul li {background:none; float:none;} 
.menu li.two ul li a { background:none; color:#606060; padding-left:31px; display:block;} 
.menu li.two ul li a:hover { color:#f5f3f4; font-weight:bold; background-color:#001991;} 

.menu li.two ul li ul { width:190px; position:absolute; left:191px; top:0px; padding-bottom:8px;} 

您可能会看到测试这里的网站http://goo.gl/jZ3v0（点击顶部菜单上的“浏览产品”）

如何在悬停“品牌目录”时只显示“新品牌目录”？

Answer 1

一种方式做，这将隐藏所有三级然后将它们显示在父li的悬停上：

.menu ul ul ul { 
    display: none; 
} 

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

Answer 2

试试这个顺序它会帮助你.. DEMO

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> 

CSS

nav ul ul { 
    display: none; 
} 

    nav ul li:hover > ul { 
     display: block; 
    } 


nav ul { 
    ; 
    padding: 0 20px; 
    border-radius: 10px; 
    list-style: none; 
    position: relative; 
    display: inline-table; 
} 
    nav ul:after { 
     content: ""; clear: both; display: block; 
    } 

    nav ul li { 
     float: left; 
    } 
     nav ul li:hover { 
      background: #4b545f; 
      background: linear-gradient(top, #4f5964 0%, #5f6975 40%); 
      background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
      background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); 
     } 
      nav ul li:hover a { 
       color: #fff; 
      } 

     nav ul li a { 
      display: block; padding: 25px 40px; 
      color: #757575; text-decoration: none; 
     } 


    nav ul ul { 
     background: #5f6975; border-radius: 0px; padding: 0; 
     position: absolute; top: 100%; 
    } 
     nav ul ul li { 
      float: none; 
      border-top: 1px solid #6b727c; 
      border-bottom: 1px solid #575f6a; position: relative; 
     } 
      nav ul ul li a { 
       padding: 15px 40px; 
       color: #fff; 
      } 
       nav ul ul li a:hover { 
        background: #4b545f; 
       } 

    nav ul ul ul { 
     position: absolute; left: 100%; top:0; 
    } 

Answer 3

尝试添加：

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

后

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