效果圖
代碼如下
<html>
<head>
<title></title>
</head>
<style>
*{
margin:0;
padding:0;
}
.nav{
margin:100px 500px;
}
.nav>li{
list-style:none;
//height:50px;
border:1px solid #000;
border-bottom:none;
line-height:35px;
}
.nav>li:last-child{
border-bottom:1px solid #000;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
}
.nav>li:first-child{
border-top-right-radius:10px;
border-top-left-radius:10px;
}
.sub{
display:none;
background:purple;
}
.sub>li{
list-style:none;
border-top:1px solid #000;
}
.sub>li:hover{
background:red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('.nav>li').click(function(){ //獲取到所有的li的點擊事件
$(this).children('.sub').slideDown(1000); //$(this)獲取到所點擊的li，$(this).children('.sub')獲取到點擊的li類叫sub的孩子，讓它下滑出來
$(this).siblings().children('.sub').slideUp(); //$(this)獲取到所點擊的li，$(this).siblings(),指獲取到除了所點擊的li所有的li，然后讓.sub上滑隱藏起來
})
})
</script>
<body>
<ul class="nav">
<li>
一級菜單
<ul class="sub">
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
</ul>
</li>
<li>
一級菜單
<ul class="sub">
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
</ul>
</li>
<li>
一級菜單
<ul class="sub">
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
</ul>
</li>
<li>
一級菜單
<ul class="sub">
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
</ul>
</li>
<li>
一級菜單
<ul class="sub">
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
</ul>
</li>
</ul>
</body>
</html>