代码部分
布局
<body>
<div class="box">
<ul class="zong">
<li class="one">
<p>新闻中心</p>
<ul class="three">
<li>添加新闻</li>
<li>添加新闻</li>
<li>添加新闻</li>
<li>添加新闻</li>
</ul>
</li>
<li class="one">
<p>关于我们</p>
<ul class="three">
<li>关于我们</li>
<li>关于我们</li>
<li>关于我们</li>
<li>关于我们</li>
</ul>
</li>
<li class="one">
<p>业务系统</p>
<ul class="three">
<li>业务系统</li>
<li>业务系统</li>
<li>业务系统</li>
<li>业务系统</li>
</ul>
</li>
<li class="one">
<p>联系我们</p>
<ul class="three">
<li>联系我们</li>
<li>联系我们</li>
<li>联系我们</li>
<li>联系我们</li>
</ul>
</li>
</ul>
</div>
</body>
样式
<style>
*{
margin: 0px;
padding: 0px;
list-style: none;
}
div{
width: 200px;
margin: 0 auto;
margin-top: 200px;
border: 1px solid black;
border-bottom: none;
text-align: center;
}
.one{
cursor: pointer;
background-color: coral;
border-bottom: 1px solid black;
}
.one:hover{
background-color: red;
}
.two{
cursor: pointer;
background-color: coral;
border-bottom: 1px solid black;
}
.two:hover{
background-color: red;
}
.three{
cursor: pointer;
background-color: white;
display: none;
border-bottom: 1px solid black;
}
.one ul li:hover{
background-color: yellow;
}
.two ul li:hover{
background-color: yellow;
}
</style>
jQuery
$(function(){
$(".one").toggle(function(){ //toggle是两次点击事件，这里是第一次点击
$(this).children("ul").slideDown(""); //slideDown()是向下滑出现的效果
$(this).siblings().children("ul").slideUp("");
},function(){ //第二次点击
$(this).children("ul").slideUp("");
});
})
