代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery学习</title>
<style type="text/css">
*{
margin:0;
padding:0
}
ul {
list-style: none;
}
.container{
width: 300px;
height: 500px;
padding-left: 10px;
margin: 200px auto;
}
.container li{
background-color: burlywood;
}
.container > ul > li{
width: 100px;
height: 50px;
background-color: aqua;
float: left;
list-style: none;
position: relative;
}
.container a{
display: block;
height: 50px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 50px;
text-align: center;
}
.container a:hover{
background-color: red;
}
.container li ul {
position: absolute;
top: 50px;
display: none;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>
<a href="javascript:void(0)">一级菜单</a>
<ul>
<li><a href="javascript:void(0)">二级菜单</a></li>
<li><a href="javascript:void(0)">二级菜单</a></li>
<li><a href="javascript:void(0)">二级菜单</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0)">一级菜单</a>
<ul>
<li><a href="javascript:void(0)">二级菜单</a></li>
<li><a href="javascript:void(0)">二级菜单</a></li>
<li><a href="javascript:void(0)">二级菜单</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0)">一级菜单</a>
<ul>
<li><a href="javascript:void(0)">二级菜单</a></li>
<li><a href="javascript:void(0)">二级菜单</a></li>
<li><a href="javascript:void(0)">二级菜单</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<script src="./js/jquery.min.js"></script>
<script>
$(function(){
// $('.container>ul>li').mouseover(function(){
// $(this).children('ul').show();
// });
// $('.container>ul>li').mouseout(function(){
// $(this).children('ul').hide();
// });
//不建议使用上面的方法，具体请百度
$('.container>ul>li').mouseenter(function(){
$(this).children('ul').show();
});
$('.container>ul>li').mouseleave(function(){
$(this).children('ul').hide();
});
});
</script>
