jquery 다중 레벨 드롭다운 메뉴 핵심 code_jquery

jquery

코드 복사 코드는 다음과 같습니다.

$( 문서).ready(function(){
$("ul li").hover(function(){
$(this).find("ul:first").show();//마우스 그러면 li 아래의 첫 번째 ul이 표시됩니다.
},function(){
$(this).find("ul:first").hide();//마우스가 ul을 남깁니다. li 아래에 d를 숨깁니다
})
$("ul li ul li ul").prev().addClass("bbb");//li 아래의 ul이 aaa인 이전 형제 요소에 CSS를 추가합니다. 스타일;
})

css

코드 복사 코드는 다음과 같습니다:

ul, li{padding:0;margin:0;}
ul li{float:left;;margin-right:1px;display:inline;list- 스타일:없음;텍스트- 정렬:중심;}
ul li ul li{float:none;배경:#ccc;margin-bottom:1px;display:block;_display:inline;position:relative;}
ul li ul{디스플레이: 없음;}
ul a{텍스트 장식:없음;너비:80px;높이:20px;라인 높이:20px;디스플레이:블록;배경:#bbb;글꼴 크기:12px}
ul li a :hover{배경:#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{배경:#f00;color:#fff}

html

코드 복사 코드는 다음과 같습니다.

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


• 
  栏目二
  


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


• 
  栏目4