顯示上的UL裏的第二個層次

我有一個下拉菜單樣式的問題懸停UL裏的第三級..顯示上的UL裏的第二個層次

當我鼠標懸停時的第三級，第二級字體顏色改爲了顏色..

我想讓它保持白色（如懸停）時，第三個層次是徘徊..

我怎麼能做到嗎？

我的風格：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    
 
<style> 
 
ul#menu 
 
{ 
 
    font-size: 20px; 
 
    display: inline; 
 
    min-height: 45px; 
 
    overflow: auto; 
 
} 
 
    
 
    ul#menu li 
 
    { 
 
     float: left; 
 
     list-style: none; 
 
     padding-left: 20px; 
 
     background-color: #ff6a00; 
 
     border-bottom: 2px solid #181818; 
 
     border-top: 2px solid #303030; 
 
     min-width: 160px; 
 
     display: block; 
 
     position: relative; 
 
     min-height: 45px; 
 
    } 
 
    
 
     ul#menu li:hover 
 
     { 
 
      background-color: #808080; 
 
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b'); 
 
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')"; 
 
      border-bottom: 2px solid #222222; 
 
      border-top: 2px solid #1B1B1B; 
 
     } 
 
    
 
     ul#menu li a 
 
     { 
 
      text-decoration: none; 
 
      padding: 0px; 
 
      border-left: 3px solid rgba(0, 0, 0, 0); 
 
      color: white; 
 
      display: block; 
 
      font-family: 'Lucida Console'; 
 
      font-size: 18px; 
 
      line-height: 45px; 
 
      padding: 0 10px; 
 
      text-decoration: none; 
 
      text-transform: uppercase; 
 
      text-align: left; 
 
     } 
 
    
 
      ul#menu li a:hover 
 
      { 
 
       border-radius: 5px 0 0 0; 
 
       border-left: 3px solid #C4302B; 
 
       color: #C4302B; 
 
      } 
 
    
 
     ul#menu li:hover 
 
     { 
 
      background-color: #DA251D; 
 
     } 
 
    
 
     ul#menu li ul 
 
     { 
 
      display: none; 
 
     } 
 
    
 
     ul#menu li:hover ul 
 
     { 
 
      display: block; 
 
     } 
 
    
 
     ul#menu li ul li 
 
     { 
 
      float: none; 
 
     } 
 
    
 

 
#menu .submenu li:hover a 
 
{ 
 
    border-left: 3px solid #454545; 
 
    border-radius: 0; 
 
    color: #ffffff; 
 
} 
 
    
 
#menu > li:hover .submenu, .menu > li:focus .submenu 
 
{ 
 
    max-height: 2000px; 
 
    z-index: 10; 
 
} 
 
    
 
    #menu > li:hover .submenu li, .menu > li:focus .submenu li 
 
    { 
 
     opacity: 1; 
 
     -webkit-transform: none; 
 
     -moz-transform: none; 
 
     -ms-transform: none; 
 
     -o-transform: none; 
 
     transform: none; 
 
    } 
 
    
 
</style> 
 
    <title>Page Title</title> 
 
</head> 
 
    
 
<body> 
 
    <div class="ThirdMenu"> 
 
    <ul id="menu" class="menu"> 
 
     <li>sangeet 
 
     <ul class="submenu" id="submenu" 
 
      <li>sdfsadf 
 
      <ul class="thirdmenu" id="thirdmenu"><li>sdfsd</li></ul> 
 
      </li> 
 
      <li></li> 
 
      <li></li> 
 
      <li></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

告訴我簡單的方式顯示在主類別第三個菜單懸停？

來源

2014-11-24 Sangeet Shah

如果我得到你的權利：

HTML：

<div class="menu_wrap"> 
    <ul class="newlevel level0"> 
     <li><a href="#">level0, link 1</a></li> 
     <li> 
      <a href="#">level0, link 2</a> 
      <ul class="newlevel level1"> 
       <li><a href="#">level1, link 1</a></li> 
       <li><a href="#">level1, link 2</a></li> 
       <li> 
        <a href="#">level1, link 3</a> 
        <ul class="newlevel level2"> 
         <li><a href="#">level2, link 1</a></li> 
         <li><a href="#">level2, link 2</a></li> 
         <li><a href="#">level2, link 3</a></li> 
        </ul>  
       </li> 
      </ul>  
     </li> 
     <li><a href="#">level0, link 3</a></li>  
    </ul> 
</div>

CSS：

.menu_wrap 
{ 
    width: 300px; 
} 

ul 
{ 
    padding: 0; 
} 

li 
{ 
    list-style: none;  
} 

a 
{ 
    display: block; 
    padding: 10px; 
    text-decoration: none; 
    background: #ff6a00; 
    color: #000; 
    border-top: 1px solid; 
} 

a:hover, .current > a 
{ 
    background: #DA251D; 
} 

.level1 a 
{ 
    padding-left: 40px;  
} 

.level2 a 
{ 
    padding-left: 80px;  
} 

.level0 ul 
{ 
    display: none; 
} 

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

JQuery的：

$(document).ready(function(){ 
    $('.newlevel li').hover(function(){ 
     if ($(this).children('ul').length > 0){ 
      $(this).addClass('current'); 
     } 
    },function(){ 
      $(this).removeClass('current');  
    }); 
});

的jsfiddle：http://jsfiddle.net/esf90kz5/3/

來源

2014-11-24 11:40:03

真的非常感謝你兄弟........................它的工作......並在6天前到今天我試圖找出它，但我不能得到我的answare，但你做到了 – 2014-11-24 14:57:05

顯示上的UL裏的第二個層次

回答

相關問題