【CSS】纯CSS实现三级导航（模板）_html/css_WEB-ITnose

后来就实际操作了级联菜单的实现，借此机会把它弄成一个模板来和大家一起学习。

以下是HTML部分：

    
    	
    		
    			一级导航    			
    				
二级导航
    				
二级导航
    				
二级导航
    				
二级导航
    			
    		
    		
    			一级导航    			
    				
二级导航
    				
二级导航
    			
    		
    		
    			一级导航    			
    				
二级导航
    				
    					二级导航>    					
    						
三级导航
    						
三级导航
    						
三级导航
    					
    				
    				
二级导航
    			
    		
    		
    			一级导航    			
    				
二级导航
    				
二级导航
    				
二级导航
    				
二级导航
    				
二级导航
    			
    		
    		
    			一级导航    			
    				
二级导航
    				
二级导航
    				
二级导航
    				
二级导航
    				
二级导航
    				
二级导航
    			
    		
    		
    			一级导航    			
    				
二级导航
    				
二级导航
    				
二级导航
    				
    					<二级导航    					
    						
三级导航
    						
三级导航
    						
三级导航
    					
    				
    			
    		
    	
    

CSS部分：

body,div,ul,li,a{margin: 0;padding: 0;text-decoration: none;}	/* 一级导航 */	.one-nav li{list-style-type: none;float: left;width: 16.57%;text-align: center;background-color: #3391E6;border-right: 1px solid white;cursor: pointer;height: 30px;line-height: 30px;}	.one-nav li:nth-last-child(1){border-right: none;}	.one-nav li a{color: white;}	.one-nav li:hover .two-nav{display: block;}	.one-nav li:hover{background-color: #4260D7;}	/* 二级导航 */	.two-nav {display: none;}	.two-nav li{width: 100%;}	.two-nav li:hover .three-nav{display: block;position: relative;}	/* 三级导航 */	.three-nav{position: absolute;width:100%;left: 100%;bottom: 100%;}	/* 最右边的三级导航显示在左边 */	.one-nav li:nth-last-child(1)  .two-nav li  .three-nav li{width: 100%;position:relative;right: 200%;}

效果图如下：

例子比较简单，但往往越简单的东西越需要脚踏实地地去实践和经历，人生已如此，共勉。

Author:致知

Sign:路漫漫其修远兮，吾将上下而求索。