适合超级新手的JQuery多级菜单

luo_yong_men · 发表于 2013-2-8 00:02:34

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
$("li.x_1").mousemove(function(){
$(this).children().slideDown(180);
});
$("li.x_1").mouseleave(function(){
$(this).children().slideUp(180);
});

$(".x_1 ul li").hover(function(){
$(this).children().slideDown(180);
},function(){
$(this).find("ul").slideUp(180);
});
$(".j2").hover(function(){
$(this).find("ul").slideDown(180);
},function(){
$(this).find("ul").slideUp(180);
});
});
</script>
<style type="text/css">
.firt{background-color:bule;}
.x_1{float:left;list-style-type:none;line-height:30px; height:30px;width:140px;background-color:blue;margin-left:2px;
text-align:center;}
.x_1:hover{background-color:red;}
.x_1 ul{display:none;position:absolute;margin-left:-40px;}
.x_1 ul li{background-color:blue;list-style-type:none;width:140px;}
.x_1 ul li:hover{background-color:red;}
a{color:#ffffff;underline:none;}
.i2 ul{display:none;position:absolute;margin-left:102px;margin-top:-30px; }
.j2 ul{display:none;position:absolute;margin-left:102px;margin-top:-30px; }
</style>
</head>
<body>
<ul id="firt" class="firt">
<li class="x_1">
第一个主菜单
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
</ul>
</li>
<li class="x_1">
第二个主菜单
<ul>
<li class="i2" >
<a href="#">子菜单ttt</a>
<ul class="i3" >
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单2</a></li>
<li class="j2">
<a href="#">子菜单2</a>
<ul class="j3" >
<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="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
</ul>

</li>
<li class="x_1">
第三个主菜单
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
</ul>
</li>
</ul>
</body>
</html>

我也是超级新手，昨天开始学的jquery 我觉得我们新手学的时候就需要一些想我这样简单的列子才看的懂！！

		自动登录	找回密码
密码			立即注册

适合超级新手的JQuery多级菜单

浏览过的版块