让我们来实现一个css三级导航
原创
©著作权归作者所有：来自51CTO博客作者Vam的金豆之路的原创作品，请联系作者获取转载授权，否则将追究法律责任
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
*{ margin: 0px; padding: 0px; }
li{list-style: none;}
.menu ul { margin: 0px; padding: 0px; width: 50%; height: 30px; background-color: #cccccc; color: #ffffff; text-align: center; }
.menu ul li { position: relative; margin-left: 0px; padding-top: 10px; padding-left: 0px; height: 20px; width: 20%; border: none; float: left; }
.menu ul li ul { visibility: hidden; width: 80%; position: absolute; top: 30px; left: 10%; }
.menu ul li ul li { width: 100%; float: none; height: 25px; padding-top: 3px; padding-bottom: 3px; position: relative; }
.menu ul li ul li ul { visibility: hidden; position: absolute; left: 100%; top: 0px; width: 80%; }
.menu ul li:hover ul li ul { visibility: hidden; }
.menu ul li ul li:hover ul { visibility: visible; background-color: #666666; color: #000000; }
.menu ul li ul li:hover ul li { background-color: #666666; color: #000000; }
.menu ul li:hover { background-color: #999999; }
.menu ul li:hover ul { visibility: visible; }
.menu ul li:hover ul li { background-color: red; color: #000000; }
</style>
</head>
<body>
<div class="menu">
<ul>
<li>
导航1
<ul>
<li>
分导航1
<ul>
<li>又导航1</li>
<li>又导航1</li>
<li>又导航1</li>
</ul>
</li>
<li>
分导航2
<ul>
<li>又导航1</li>
<li>又导航1</li>
<li>又导航1</li>
</ul>
</li>
<li>分导航3</li>
<li>分导航4</li>
</ul>
</li>
<li>
导航2
<ul>
<li>分导航1</li>
<li>分导航2</li>
<li>分导航3</li>
<li>分导航4</li>
</ul>
</li>
<li>
导航3
<ul>
<li>分导航1</li>
<li>分导航2</li>
<li>分导航3</li>
<li>分导航4</li>
</ul>
</li>
<li>
导航4
<ul>
<li>分导航1</li>
<li>分导航2</li>
<li>分导航3</li>
<li>分导航4</li>
</ul>
</li>
<li>
导航5
<ul>
<li>分导航1</li>
<li>分导航2</li>
<li>分导航3</li>
<li>分导航4</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
