纯CSS制作三级导航菜单

江山如画 • 2018年8月2日上午8:15 • 网页特效 • 阅读 2547

本文分享如何使用纯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制作三级导航菜单效果预览：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯CSS制作三级导航菜单</title> <style> *{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;} </style> </head> <body>  <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>  </body> </html>

Tips:You can change the code before run.

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2423.html