<!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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
