垂直菜单

效果图

 

一 创建垂直3级菜单 

  (1)   利用CSS3方式，先设置一级的 UL为相对于我

.one_level_li{

    position:relative;

}

 (2) 设置一级LI下的UL:二级 ，则UL的下的li自动跟随UL属性

.two_level_ul{
 position:absolute; 位置相对li的位置

 margin-left:175px; 设置他的位置，向右移动175px，是菜单的宽度

 margin-top:-1em;   设置X轴，向上移动一个行距

 visibility:hidden; 默认不显示

}

 (3) 设置二级下LI的UL:三级 ，属性同上

.three_level_ul{

 position:absolute;

 margin-left:175px;

 margin-top:-1em;

 visibility:hidden; 

}

(4) 鼠标hover li元素时 设置二级的ul显示

li:hover .two_level_ul{

 visibility:visible; 

}

(5)鼠标hover 二级才的LI时， 设置二级的ul显示

.two_level_li:hover .three_level_ul{

 visibility:visible; 

}
 












  

    
one
    	

    		
aaaa
    		  

    		  
1111
    		  
2222
    		  
3333
    		  
	
    		
    		
bbbb
    			 

    		  
AAAA
    		  
BBBB
    		  
CCCC
    		  
	
    			
    			
    			
    		
    		
    		
cccc
    		
dddd
      
	
    
    
two	
    	

    		
first
    		
second
    		
third
    		
fouth
      
	
    	
    
three
    
four
    
five
    
six