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;}