<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉列表</title>
<meta charset="utf-8" />
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
.ul {
550px;
height: 30px;
margin: 100px auto;
background-color: deepskyblue;
padding-left:10px;
}
.ul li {
float: left;
100px;
height: 30px;
line-height: 30px;
text-align: center;
margin-right:10px;
_display:inline;
position:relative;
}
.ul ul{
display:none;
position:absolute;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
$('.ul>li').mouseover(function (e) {
$(this).children().stop().slideDown(500); //向下滑动的速度500ms
});
$('.ul>li').mouseout(function (e) {
$(this).children().stop().slideUp(500); //向上滑动的速度500ms
});
});
</script>
</head>
<body>
<ul class="ul">
<li>
老大
<ul>
<li>laoer</li>
<li>laoer</li>
<li>laoer</li>
</ul>
</li>
<li>
老大<ul>
<li>laoer</li>
<li>laoer</li>
<li>laoer</li>
</ul>
</li>
<li>
老大<ul>
<li>laoer</li>
<li>laoer</li>
<li>laoer</li>
</ul>
</li>
<li>
老大<ul>
<li>laoer</li>
<li>laoer</li>
<li>laoer</li>
</ul>
</li>
<li>
老大<ul>
<li>laoer</li>
<li>laoer</li>
<li>laoer</li>
</ul>
</li>
</ul>
</body>
</html>
注：jQuery中的动画和事件是遵循一个叫做排队机制的原理，也就是说如果一次触发执行了很多动画那么后面的动画不会自动替换前面的动画，而会一直排队等待执行；
解决方法：在执行动画之前用stop（）方法来清空排队。