jquery multi-level drop-down menu core code_jquery

jquery

Copy code The code is as follows:

$(document). ready(function(){
$("ul li").hover(function(){
$(this).find("ul:first").show();//Mouse over to find The first ul under li is then displayed;
},function(){
$(this).find("ul:first").hide();//The mouse leaves the ul that hides d under li ;
})
$("ul li ul li ul").prev().addClass("bbb");//Add css to the previous sibling element where ul below li is aaa style;
})

css

Copy code The code is as follows:

ul, li{padding:0;margin:0;}
ul li{float:left;;margin-right:1px;display:inline;list-style:none;text- align:center;}
ul li ul li{float:none;background:#ccc;margin-bottom:1px;display:block;_display:inline;position:relative;}
ul li ul{display: none;}
ul a{text-decoration:none;width:80px;height:20px;line-height:20px;display:block;background:#bbb;font-size:12px}
ul li a :hover{background:#eee;color:#000}
ul li ul li .aaa{position:absolute;left:80px;top:0;border-left:1px solid #fff}
ul li ul li .aaa li{float:none;}
body .bbb{background:#f00;color:#fff}

html

Copy code The code is as follows:

• 
  栏目一
  
  
  
  • 菜单一
  
  
  • 菜单一
  
  
  • 菜单一
  
  
  • 菜单一
    
    
    
    • 菜单三
    
    
    • 菜单三
      
      
      
      • 菜单三
      
      
      • 菜单三
      
      
      • 菜单三
        
        
        
        • 菜单三
        
        
        • 菜单三
        
        
        • 菜单三
          
          
          
          • 菜单三
          
          
          • 菜单三
          
          
          • 菜单三
          
          
          • 菜单三
          
          
          
          
        
        
        • 菜单三
        
        
        
        
      
      
      • 菜单三
      
      
      
      
    
    
    • 菜单三
    
    
    • 菜单三
    
    
    
    
  
  
  
  


• 
  栏目二
  


• 
  栏目三
  
  
  
  • 菜单三
    
  
  
  • 菜单三
    
    
    
    • 菜单三
    
    
    • 菜单三
      
      
      
      • 菜单三
      
      
      • 菜单三
      
      
      • 菜单三
        
        
        
        • 菜单三
        
        
        • 菜单三
        
        
        • 菜单三
        
        
        • 菜单三
        
        
        
        
      
      
      • 菜单三
        
        
        
        • 菜单三
        
        
        • 菜单三
          
          
          
          • 菜单三
          
          
          • 菜单三
          
          
          • 菜单三
          
          
          • 菜单三
          
          
          
          
        
        
        • 菜单三
        
        
        • 菜单三
        
        
        
        
      
      
      
      
    
    
    • 菜单三
    
    
    • 菜单三
    
    
    
    
  
  
  • 菜单三
  
  
  • 菜单三
  
  
  
  


• 
  栏目四