实现CSS多级导航菜单效果
分类：实例代码
CSS多级导航菜单效果属于前端实例代码，有关更多实例代码大家可以查看。
分享一段代码实例，它实现了多级导航菜单效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
.top-nav {
font-size: 12px;
font-weight: bold;
list-style: none;
}
.top-nav li {
float: left;
list-style: none;
margin-right: 1px;
}
.top-nav li a {
line-height: 25px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
}
.top-nav li a:hover {
background: #900;
color: #FFF;
}
.top-nav ul {
list-style: none;
display: none;
width: 80px;
padding: 0;
position: relative;
}
.top-nav li ul li ul {
position: absolute;
top: 0;
left: 80px;
}
.top-nav li:hover ul {
display: block;
}
.top-nav li:hover ul li ul {
display: none;
}
.top-nav li ul li:hover ul {
display: block;
}
</style>
</head>
<body>
<ul class="top-nav">
<li>
<a href="#">前端教程网</a>
<ul>
<li>
<a href="#">前端课程 +</a>
<ul>
<li><a href="#">javascript</a></li>
<li><a href="#">css</a></li>
<li><a href="#">jquery</a></li>
</ul>
</li>
<li>
<a href="#">手机开发+</a>
<ul>
<li><a href="#">ios开发</a></li>
<li><a href="#">android开发</a></li>
<li><a href="#">WP开发</a></li>
</ul>
</li>
<li><a href="#">后台编程</a></li>
</ul>
</li>
<li><a href="#">课程大厅</a> </li>
<li>
<a href="#">学习中心 +</a>
<ul>
<li>
<a href="#">前端课程 +</a>
<ul>
<li><a href="#">javascript</a></li>
<li><a href="#">css</a></li>
<li><a href="#">jquery</a></li>
</ul>
</li>
<li>
<a href="#">手机开发</a>
<ul>
<li><a href="#">ios开发</a></li>
<li><a href="#">android开发</a></li>
<li><a href="#">WP开发</a></li>
</ul>
</li>
<li><a href="#">后台编程</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</body>
</html>
CSS多级导航菜单效果，这样的场景在实际项目中还是用的比较多的，关于CSS多级导航菜单效果就介绍到这了。