本文分享如何使用纯CSS制作三级导航菜单，优点：代码简洁，速度快。
HTML代码：
<!--代码部分begin www.125jz.com-->
<div class="menu">
<ul class="nav1">
<li class="li1"><a href="http://www.125jz.com">一级导航</a>
<ul class="nav2">
<li class="li2"><a href="#">二级导航</a></li>
<li class="li2"><a href="#">二级导航</a>
<ul class="nav3">
<li class="li3"><a href="#">三级导航</a></li>
<li class="li3"><a href="#">三级导航</a></li>
<li class="li3"><a href="#">三级导航</a></li>
<li class="li3"><a href="#">三级导航</a></li>
</ul>
</li>
<li class="li2"><a href="#">二级导航</a></li>
<li class="li2"><a href="#">二级导航</a></li>
</ul>
</li>
<li class="li1"><a href="#">一级导航</a></li>
<li class="li1"><a href="#">一级导航</a></li>
<li class="li1"><a href="#">一级导航</a></li>
<li class="li1"><a href="#">一级导航</a></li>
<li class="li1"><a href="#">一级导航</a></li>
</ul>
</div>
<!--代码部分end-->
CSS代码：
*{margin: 0;padding: 0;}
.menu{ margin:100px 100px;}
.menu ul a{font-family: '微软雅黑';font-size: 14px;color: #333;text-decoration: none;}
.menu ul a:hover{color: #000;text-decoration: none;}
.menu ul li{width: 100px;height: 35px;line-height: 35px;text-align: center;position: relative;}
.menu ul li:hover{background: #c1c1c1;}
.menu ul{width: 100px;height: auto;position: absolute;background: #DADADA;list-style: none;}
.menu ul.nav2{left: 99px;top: 0;display: none;}
.menu ul.nav3{left: 99px;top: 0;display: none;}
.menu .nav1 .li1:hover ul.nav2{display: block;background: #c1c1c1;}
.menu .nav2 .li2:hover ul.nav3{display: block;background: #c1c1c1;}
纯CSS制作三级导航菜单效果预览：
Tips:You can change the code before run.
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2423.html
微信扫一扫 
支付宝扫一扫