<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.li{
border:2px solid red;
background-color: #00AA88;
list-style: none;
margin-left: 30px;
width: 120px;
height:30px;
text-align: center;
}
.ul{
border:2px solid red;
background-color: #00AA88;
height:200px;
width:200px;
margin-left:120px;
display: none;
margin-top:-20px;
}
.li li{
list-style: none;
}
.block{
display: block;
}
</style>
</head>
<body>
<div >
<ul>
<li class="li">大满贯
<ul class="ul" >
<li>澳网</li>
<li>法网</li>
<li>温网</li>
<li>美网</li>
</ul>
</li>
<li class="li">大师赛
<ul class="ul">
<li>辛辛那提</li>
<li>上海</li>
</ul>
</li>
<li class="li">500级赛事
<ul class="ul">
<li>迪拜公开赛</li>
<li>中网</li>
</ul>
</li>
<li class="li">250级赛事
<ul class="ul">
<li>哈雷</li>
<li>鹿特丹</li>
<li>深圳</li>
</ul>
</li>
</ul>
</div>
<script src="../jquery-2.2.4.min.js"></script>
<script>
$('.li').hover(
function(){
$(this).children().addClass('block');
$('.ul').click(function(){
$(this).removeClass('block');
});
},
function(){
$(this).children().removeClass('block');
}
)
</script>
</body>
</html>
