关于多级导航如何实现 详细解释。
大家平时见过的导航一般都只有二级，二级里面有横列排着的，还有竖着排列的。
以下献上代码供大家分享，如果有更多种方法 欢迎大家联系版主 ，版主用qq比较多1985076744.
为了让更加明白这个逻辑，所以加了class类名 。缺点是加了class以后 就不能复制粘贴了，去掉class
以后就可以复制粘贴了。
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| </head> | |
| <style> | |
| *{margin: 0;padding:0;} | |
| ul{list-style: none;} | |
| .ul2{margin: 50px;} | |
| .ul1{width: 1000px;} | |
| .ul1 li,.ul2 li{float: left;width: 80px;height: 40px;background: blue;cursor: pointer;text-align: center;line-height: 40px;} | |
| a{text-decoration: none;width: 80px;height: 40px;display: block;} | |
| a:hover{ background: red; } | |
| .ul1{display: none;} | |
| .ul2 li:hover .ul1{display: block; }.ul1:hover li{background: orange;} | |
| 第一种样式 | |
| .ul3{display: none;} | |
| .btn:hover .ul3{display: block;} | |
| .ul4{list-style: none;float: left;} | |
| .ul4 li{ height: 40px;background: green;float: left;width: 80px;text-align:center;line-height: 40px;} | |
| 第二种样式 | |
| *{margin: 0;padding: 0;} ul{list-style: none;} | |
| a{text-decoration: none;} li{width: 80px; height: 60px;background: blue;text-align: center;line-height: 60px;} | |
| .ul5 .li1{float: left;} .ul6 {float: left;} | |
| .ul6,.ul7{display:none; } .ul6{width: 1000px;} | |
| .ul5 .li1:hover .ul6{display: block;} | |
| .ul6 li:hover .ul7{display: block;} | |
| .ul7 li{float: left;} | |
|
.ul6{position: relative;} .ul7{position:absolute;top: 0px; left: 80px; }
|
|
| 三级导航样式 | |
| </style> | |
| <body> | |
| <!-- <video src=""></video> | |
| <marquee behavior="alternate" direction="right" scrollamoun="50">我是文字</marquee> --> | |
| <ul class="ul2"> | |
| <li><a href="">首页</a> | |
| <ul class="ul1"> | |
| <li><a href="">首页</a></li> | |
| <li><a href="">首页</a></li> | |
| <li><a href="">首页</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| <ul class="ul4"> | |
| <li class="btn"><a href="">首页</a> | |
| <ul class="ul3"> | |
| <li><a href="">首页</a></li> | |
| <li><a href="">首页</a></li> | |
| <li><a href="">首页</a></li> | |
| </li> | |
| </ul> | |
| </li> | |
| </ul> | |
| <ul class="ul5" style="margin:50px;"> | |
| <li class="li1"><a href="">首页</a> | |
| <ul class="ul6"> | |
| <li class="li3"><a href="">首页</a> | |
| <ul class="ul7"> | |
| <li>首页</li> | |
| <li>首页</li> | |
| </ul> | |
| </li> | |
| <li><a href="">首页</a> | |
| <ul class="ul7"> | |
| <li>首页</li> | |
| <li>首页</li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="li1"><a href="">首页</a> | |
| <ul class="ul6"> | |
| <li><a href="">首页</a> | |
| <ul class="ul7"> | |
| <li>首页</li> | |
| <li>首页</li> | |
| </ul> | |
| </li> | |
| <li><a href="">首页</a> | |
| <ul class="ul7"> | |
| <li>首页</li> | |
| <li>首页</li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </body> | |
| </html> |
浙公网安备 33010602011771号