大家平时见过的导航一般都只有二级,二级里面有横列排着的,还有竖着排列的。
以下献上代码供大家分享,如果有更多种方法 欢迎大家联系版主 ,版主用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{ 1000px;} | |
.ul1 li,.ul2 li{float: left; 80px;height: 40px;background: blue;cursor: pointer;text-align: center;line-height: 40px;} | |
a{text-decoration: none; 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; 80px;text-align:center;line-height: 40px;} | |
第二种样式 | |
*{margin: 0;padding: 0;} ul{list-style: none;} | |
a{text-decoration: none;} li{ 80px; height: 60px;background: blue;text-align: center;line-height: 60px;} | |
.ul5 .li1{float: left;} .ul6 {float: left;} | |
.ul6,.ul7{display:none; } .ul6{ 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> |