CSS实现三级菜单[转]

头部导航条布局

html代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>头部导航条制作</title>
 6     <link rel="stylesheet" type="text/css" href="css/master8.css">
 7 </head>
 8 <body>
 9 <div class="navbox">
10     <ul class="clearfix">
11         <li><a href="#">首页</a></li>
12         <li><a href="#">资讯</a></li>
13         <li><a href="#">web前端</a></li>
14         <li><a href="#">前端新闻</a></li>
15         <li><a href="#">联系我们</a></li>
16         <li><a href="#">关于我们</a></li>
17     </ul>
18 </div>
19 </body>
20 </html>

用无序列表制作头部导航条：

无序列表是上下布局排列的，那我们需要思考的是让他左右布局的方式排列
左右排列的方式我们所用的是float:left;浮动的方法让li左右布局

CSS样式：

 1 .navbox{
 2     960px;
 3    height: 40px;
 4    margin: 20px auto;
 5    background: #08c;
 6 }
 7 .navbox >ul>li{
 8    float: left;
 9     160px;
10    height: 40px;
11    line-height: 40px;
12    text-align: center;
13    font-size: 16px;
14 }

鼠标移入时实现颜色的变换

HTML代码：

 1 <div class="navbox">
 2     <ul class="clearfix">
 3         <li><a href="#">首页</a></li>
 4         <li><a href="#">资讯</a></li>
 5         <li><a href="#">web前端</a></li>
 6         <li><a href="#">前端新闻</a></li>
 7         <li><a href="#">联系我们</a></li>
 8         <li><a href="#">关于我们</a></li>
 9     </ul>
10 </div>

思路：
鼠标移入时每个<li>显示为另一种颜色background: #00bfff;
css代码：

1 .navbox ul li a{
2     display: block;
3     color: #fff;
4     background: #08c;
5 }
6 .navbox ul li a:hover{
7     text-decoration: none;
8     background: #00bfff;
9 }

下拉菜单实现

html：

 1 <div class="navbox">
 2     <ul class="clearfix">
 3         <li><a href="#">首页</a></li>
 4         <li><a href="#">资讯</a></li>
 5         <li><a href="#">web前端</a>
 6             <ul class="subnav">
 7                 <li><a href="#">HTML</a></li>
 8                 <li><a href="#">CSS</a></li>
 9                 <li><a href="#">JavaScript</a></li>
10             </ul>
11         </li>
12         <li><a href="#">前端新闻</a></li>
13         <li><a href="#">联系我们</a></li>
14         <li><a href="#">关于我们</a></li>
15     </ul>
16 </div>

思路：
在一级菜单web前端下实现二级菜单<ul class="subnav">

html
css
JavaScript
当鼠标移入菜单时web前端时显示二级菜单，移出时隐藏；
CSS代码实现：

1 .subnav{
2     display: none;
3 }
4 /*鼠标没有移入“web前端”选项栏时二级菜单隐藏*/
5 .navbox ul li:hover .subnav{
6     display: block;
7 }
8 /*当鼠标移入“web前端”选项栏时显示二级菜单*/

三级菜单实现

 1 <div class="navbox">
 2     <ul class="clearfix">
 3         <li><a href="#">首页</a></li>
 4         <li><a href="#">资讯</a></li>
 5         <li><a href="#">web前端</a>
 6             <ul class="subnav">
 7                 <li><a href="#">HTML</a></li>
 8                 <li><a href="#">CSS</a>
 9                     <ul class="threenav">
10                         <li><a href="#">css1</a></li>
11                         <li><a href="#">css2</a></li>
12                         <li><a href="#">css3</a></li>
13                     </ul>
14                 </li>
15                 <li><a href="#">JavaScript</a></li>
16             </ul>
17         </li>
18         <li><a href="#">前端新闻</a></li>
19         <li><a href="#">联系我们</a></li>
20         <li><a href="#">关于我们</a></li>
21     </ul>
22 </div>

思路：
前面与二级菜单思路相似唯一不同的是三级菜单显示的位置。

我们看看css的绝对定位与相对定位这篇文章

CSS代码：

 1 .subnav>li{
 2     position: relative;
 3 }
 4 .threenav{
 5     position: absolute;
 6     top: 0;
 7     left: 160px;
 8      160px;
 9 }
10 .subnav, .threenav{
11     display: none;
12 }
13 .subnav li:hover .threenav{
14     display: block;
15 }

最后实现的效果如下图：