<!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;} .qdxw{ margin:100px 100px;} .qdxw ul a{width: 200px;font-family: '微软雅黑';font-size: 14px;color: #000;text-decoration: none;} .qdxw ul a:hover{color: #5fb878;text-decoration: none;} .qdxw ul li{width: 200px;height: 35px;line-height: 35px;text-align: center;position: relative;} .qdxw ul li:hover{background: aliceblue;} .qdxw ul{width: 200px;height: auto;position: absolute;background: aliceblue;list-style: none;} .qdxw ul.nav2{left: 199px;top: 0;display: none;} .qdxw ul.nav3{left: 199px;top: 0;display: none;} .qdxw .nav1 .li1:hover ul.nav2{display: block;background: aliceblue;} .qdxw .nav2 .li2:hover ul.nav3{display: block;background: #c1c1c1;} </style> </head> <body> <div class="qdxw"> <ul class="nav1"> <li class="li1"> <a href="#">一级导航是我们</a> <ul class="nav2"> <li class="li2"><a href="#">二级导航</a></li> <li class="li2"><a href="#">二级导航</a></li> </ul> </li> </ul> </div> <br><br><br> <!--代码部分--> <div class="qdxw"> <ul class="nav1"> <li class="li1"> <a href="#">一级导航是我们</a> <ul class="nav2"> <li class="li2"><a href="#">二级导航</a> <ul class="nav3"> <li class="li3"><a href="#">三级导航</a></li> <li class="li3"><a href="#">三级导航</a></li> </ul> </li> <li class="li2"><a href="#">二级导航</a></li> </ul> </li> </ul> </div> <!--代码部分end--> </body>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
