级联下拉菜单效果
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$(".menu li,.menu ul li").mouseenter(
function(){
$(this).children("ul").stop(true,true).slideDown(100).animate({opacity:1},20);
}
).mouseleave(
function(){
$(this).children("ul").stop(true,true).slideUp(100).animate({opacity:.3},20);
}
)
})
</script>
<style>
*{color:white;line-height:16px;font-size:12px;}
a{text-decoration:none;}
body,ul{margin:0;paliing:0;}
li{list-style:none;}
.clearfix{clear:both;}
.menu{background-color:black;}
.menu > li{float:left;position:relative;line-height:16px;}
.menu li a{display:block;padding:10px 20px;}
.menu li a:hover{background-color:#999;}
.menu li ul{position:absolute;background-color:black;width:180px;padding:10px 0;}
.menu li{padding:0 5px;}
.menu li a{color:#ccc;display:block;}
.menu li:hover a,.menu li li:hover a{color:white;}
.menu li:hover{background-color:#999;}
.menu li{position:relative;}
.menu li ul{position:absolute;width:180px;left:180px;top:0;background-color:black;left:0;top:36px;display:none;opacity:.3;}
.menu li ul ul{left:180px;top:0;padding-top:0;}
.menu li li{float:none;}
</style>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<ul class="menu">
<li><a href="">主菜单</a>
<ul>
<li>
<a href="">一级菜单</a>
<ul>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
</ul>
</li>
<li>
<a href="">一级菜单</a>
<ul>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
</ul>
</li>
<li>
<a href="">一级菜单</a>
<ul>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
</ul>
</li>
<li>
<a href="">一级菜单</a>
<ul>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">主菜单</a>
<ul>
<li>
<a href="">一级菜单</a>
<ul>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
</ul>
</li>
<li>
<a href="">一级菜单</a>
<ul>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
</ul>
</li>
<li>
<a href="">一级菜单</a>
<ul>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
</ul>
</li>
<li>
<a href="">一级菜单</a>
<ul>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">主菜单</a>
<ul>
<li>
<a href="">一级菜单</a>
<ul>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
</ul>
</li>
<li>
<a href="">一级菜单</a>
<ul>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
</ul>
</li>
<li>
<a href="">一级菜单</a>
<ul>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
</ul>
</li>
<li>
<a href="">一级菜单</a>
<ul>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
<li><a href="">2级菜单</a></li>
</ul>
</li>
</ul>
</li>
<div class="clearfix"></div>
</ul>
</body>
</html>
腾讯云开发者
