HTML+CSS实现二级导航

一. 简单的说就是列表里面再嵌套一个列表：

HTML教程
    

        
辉辉傻逼  
        
辉辉傻逼  
        
辉辉傻逼  
    

 

二. css样式设置

应由外向内设置样式。

先介绍几种样式：

1. display:block:表示元素显示为行级元素，独占一行。可设置元素的宽度和高度。
   display:inline-block:表示元素显示为内联行级元素，既可并排显示，也可设置元素的宽度和高度。
2. font:14px/20px arial;表示字体大小为14px,行高为20px,字体为arial;相当于下面三行代码：

font-size:14px;
line-height:20px;
font-family:arial;

其中，将line-height设置为与容器的高度相等可实现元素垂直居中，text-align只能实现水平居中。

3. 要想让标签ul里面的标签li里面的元素并排显示，必须将最外层li样式设置为display:inline-block;否则一行只能显示一个li元素。并且标签li里面的超链接样式也要设置为display:inline-block;才能进行相应的样式设置，否则样式设置受到限制。

#nav li{
         display:inline-block;
    } 
#nav li a{
         display:inline-block;
         padding:0 20px;
         color:#FFF;
         text-decoration:none;
         font:17px/60px arial;/*17px代表字体大小，60px代表行高，arial代表字体;*/
    } 

4. 将li标签里面的嵌套列表ul的定位设置为绝对定位position:absolute;表示相对于父级元素定位，要想让二级列表里面的内容隐藏起来，则将ul样式设置为display:none;.

#nav  li ul { 
        position:absolute; 
        display:none;
}

5. 这点特别关键，决定了二级菜单的下拉效果垂直显示，否则下拉后只能并排显示。

#nav li ul li {
             display: block;
}

6. 接下来可将二级菜单中的超链接a的背景颜色设置为与一级菜单中的一样，让看起来像个整体。

#nav li ul li a {
            background:#00A2CA;
}

7. 这点也非常重要，决定了二级列表能否显示。即当鼠标移到一级菜单上时，二级菜单能否下拉。

#nav li:hover ul{
            display:block; 
}

三.整体代码

    
        
        
        
    
    
        
 
            
首页
 
            
HTML教程
                

                    
辉辉傻逼  
                    
辉辉傻逼  
                    
辉辉傻逼  
                
            
 
            
CSS基础
                

                    
辉辉最帅
                    
辉辉最帅
                    
辉辉最帅
                    
辉辉最帅
                
            
 
            
CSS开发工具
                

                    
heheheheheH
                    
heheheheheH
                    
heheheheheH
                    
heheheheheH
                    
heheheheheH
                
            
 
            
CSS特效
 
            
CSS问题