您的位置：首页 > Web前端 > CSS

二级菜单总结

2016-03-31 12:33 543 查看
原理：在一个列表的列表项中嵌入另一个（第二级）列表

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">

*{
margin: 0;
padding: 0;
}

ul li{

float: left;
list-style: none;
}
.secNav li{
float: none;

}
ul.secNav{
display: none;
}

.secNav a{
background: #B5B5B3;
}
ul li:hover .secNav {
display: block;
}

ul li a{

display: block;
width: 6em;
height:3em;
line-height: 3em;
text-align: center;

color:#F4F2F2;
border-left: 1px solid #c8c8c8;
background:#564E4E;
text-decoration: none;

}

</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li>
<a href="#">新闻</a>
<ul class="secNav">
<li><a href="#">时事新闻</a></li>
<li><a href="#">当地新闻</a></li>
<li><a href="#">世界新闻</a></li>
</ul>
</li>
<li><a href="#">动态</a></li>
<li><a href="#">帮助</a></li>
</div>
</body>
</html>





解释及注意事项：

1.注意嵌套，可以为二级ul添加一个类

2.设置margin和padding为0才能让第二级菜单与第一级菜单自动对齐

<pre name="code" class="html">            *{
margin: 0;
padding: 0;
}


3.取消第二级li的浮动，因为第一级设置了float从而变为了横向 
<pre name="code" class="html">   .secNav li{
float: none;
}


4.隐藏和显示都是针对第二级ul做的操作，同时用第一级的li去hover第二级的ul

<pre name="code" class="html">ul.secNav{
display: none;
}


<pre name="code" class="html">ul li:hover .secNav {
display: block;
}


5.用a选择器设置样式可以同时设置字体样式
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                css
                                                按钮
                                                菜单
                                                导航
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航