多级导航 如何去写 下篇
在解释过我们如何去写的原理以后，接下来就是如何去书写我们的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{margin: 0 auto;padding: 0px;}
a{text-decoration: none;background: gray;display: block;}
ul li{float: left; list-style-type: none;width: 100px;height: 30px;line-height: 30px;text-align: center;}
ul li ul{position: relative;}
ul li ul {display: none;}
ul li:hover ul{display: block;} 二级导航
ul li ul li ul li{display: none;}
ul li ul li:hover ul li{display: block;}
ul li ul li ul {position: absolute;left: 100px;margin-top:-30px;display: none;}三级导航内容
导航制作内容
ul li a {background: black;}
ul li ul li a{background: red;}
ul li ul li ul li a{background: white;}
上色内容
ul li a:hover{background: orange;}
ul li ul li a:hover{background: skyblue;}
ul li ul li ul li a:hover{background: pink;}
伪类内容
</style>
<body>
<ul style="margin: 50px;">
<li>
<a href="#">首页1</a>
<ul>
<li><a href="#">首页2</a>
<ul>
<li><a href="#">首页3</a></li>
<li><a href="#">首页3</a></li>
<li><a href="#">首页3</a></li>
<li><a href="#">首页3</a></li>
</ul>
</li>
<li><a href="#">首页2</a>
<ul>
<li><a href="#">首页3</a></li>
<li><a href="#">首页3</a></li>
<li><a href="#">首页3</a></li>
<li><a href="#">首页3</a></li>
</ul>
<li><a href="#">首页2</a>
<ul>
<li><a href="#">首页3</a></li>
<li><a href="#">首页3</a></li>
<li><a href="#">首页3</a></li>
<li><a href="#">首页3</a></li>
</ul>
<li><a href="#">首页2</a>
<ul>
<li><a href="#">首页3</a></li>
<li><a href="#">首页3</a></li>
<li><a href="#">首页3</a></li>
<li><a href="#">首页3</a></li>
</ul>
</li>
</ul>
</body>
</html>
浙公网安备 33010602011771号