jquery 無限級聯選單案例分享_jquery

腳本>

$(document).ready(function(){
$('.menu li').hover(function(){
$(this ).children('ul').show() ;
$(this).focus().addClass('focusa')
},function(){
$(this).children( 'ul').hide(); $(this).focus().removeClass('focusa');
});
腳本>

ul{ 列表樣式：無；保證金：0；填充：0;}
.menu { 高度：30px;行高：30px； }
.menu li { float:left; position:relative ;} /* 這一級是導航*/
.menu li a { display:block;高度：30px；行高：30px；內邊距：0 20px; }
.menu li a:hover { color:#000;背景：url(img/bg1.png); }
.menu li a.more { background:url(img/there.png) no-repeat 130px center; }
.menu li ul { 位置：絕對；浮動：左；寬度：150px；邊框：1px實心#000; display:none;} /*這是第二層選單*/
.menu li ul a { width:110px; }
.menu li ul a:hover { 背景:url(img/bg1.png);}
.menu li ul ul{ top:0;left:150px;}/*從第三層選單開始,所有的子級選單都相對偏移*/

• 菜單一
  
  
  
  • 菜單一
  
  
  • 選單二
  
  
  • 選單三
  
  
  • 選單四
  
  
  • 選單五
    
    
    
    • 選單一
    
    
    • 選單二
    
    
    • 選單三
    
    
    • 選單四
    
    
    • 選單五
      
      
      
      • 菜單一
      
      
      • 菜單二
      
      
      • 菜單三
      
      
      • 選單四
      
      
      • 選單五
        
        
        
        • 選單一
        
        
        • 選單二
        
        
        • 選單三
        
        
        • 選單四
        
        
        • 選單五
        
        
        
        
      
      
      
      
    
    
    
    
  
  
  
  


• 選單二
  
  
  
  • 選單一
  
  選單二


• 選單三
  
  
  
  • 菜單一
  
  
  • 菜單二
  
  
  • 選單三
    
    
    
    • 選單一
    
    
    • 選單二
    
    
    • 菜單三
    
    
    • 菜單四
    
    
    • 選單五
    
    
    
    
  
  
  • 選單四
  
  
  
  

選單三

選單四

選單五

• 選單一


• 選單二
  
• 選單三