<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="base.css" />
<style type="text/css">
ul.nav{ width: 840px; margin: 20px auto;}
ul.nav li{ width: 200px; text-align:center;}
ul.nav > li{ float: left; margin-right:10px;}
ul.nav li a{height: 40px; line-height: 40px; display: block;}
ul.nav > li > a{ background: #72a7ff;}
ul.nav > li > ul > li a{ background: #ffd9d9;}
ul.nav > li a:hover,.choice{ background: #ffc0c0!important;}
ul > li > ul{ display: none;}
ul > li.on > ul{ display: block;}
ul.nav li{ position: relative;}
ul.nav > li > ul > li ul{ position: absolute; top: 0; right: -200px;}
ul.nav a.sub{ position: absolute; display: block; right:10px; top: 0; width: 10px; height: 40px; background: url(arrows.png) no-repeat center center;}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
$("ul.nav li").hover(function(){
$(this).addClass("on");
},function(){
$(this).removeClass("on");
});
$("ul.nav li").hover(function(){
$(this).parent("ul").siblings("a").addClass("choice");
},function(){
$(this).parent("ul").siblings("a").removeClass("choice");
});
if ($("ul.nav li").find("ul") .html()!="") {
$("ul.nav li").parent("ul").siblings("a").append("<a class='sub'></a>");
}
});
</script>
<ul class="nav">
<li><a href="###">我的网站</a>
<ul>
<li><a href="###">2级分类</a>
<ul>
<li><a href="###">3级分类</a>
<ul>
<li><a href="###">4级分类</a>
<ul>
<li><a href="###">5级分类</a></li>
<li><a href="###">5级分类</a></li>
<li><a href="###">5级分类</a></li>
<li><a href="###">5级分类</a></li>
</ul>
</li>
<li><a href="###">4级分类</a></li>
<li><a href="###">4级分类</a></li>
<li><a href="###">4级分类</a></li>
</ul>
</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>
<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>
</ul>
</li>
<li><a href="###">我的网站</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>
<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>
</ul>
</li>
<li><a href="###">我的网站</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>
<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>
</ul>
</li>
<li><a href="###">我的网站</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>
<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>
</ul>
</li>
</ul>
</body>
</html>
效果图：