<!DOCTYPE html>
层级菜单
<style type="text/css">
ul,body {
margin: 0;
padding: 0;
}
.menu {
margin: 0 auto;
/*height: 550px;*/
width: 200px;
background-color: cyan;
}
ul {
list-style: none;
}
.menu li {
width: 200px;
}
.menu li a{
text-decoration: none;
text-align: center;
}
.menu li a.fore {
display: block;
width: 200px;
height: 20px;
font: 700 16px/20px 'Microsoft Yahei';
background-color: #F79500;
}
.menu li ul li a{
display: block;
font: 400 14px/20px 'Microsoft Yahei';
margin:0 auto;
}
.menu li ul {
display: none;
}
.menu li ul.current {
display: block;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('.fore').click(function() {
$(this).next().slideDown('current').parent().siblings().children('ul').slideUp();
});
});
</script>
<li>
<a href="" class="fore">水果2</a>
<ul>
<li><a href="#">苹果</a></li>
<li><a href="#">香蕉</a></li>
<li><a href="#">火龙果</a></li>
<li><a href="#">梨子</a></li>
</ul>
</li>
<li>
<a href="" class="fore">水果3</a>
<ul>
<li><a href="#">苹果</a></li>
<li><a href="#">香蕉</a></li>
<li><a href="#">火龙果</a></li>
<li><a href="#">梨子</a></li>
</ul>
</li>
<li>
<a href="" class="fore">水果4</a>
<ul>
<li><a href="#">苹果</a></li>
<li><a href="#">香蕉</a></li>
<li><a href="#">火龙果</a></li>
<li><a href="#">梨子</a></li>
</ul>
</li>
<li>
<a href="" class="fore">水果5</a>
<ul>
<li><a href="#">苹果</a></li>
<li><a href="#">香蕉</a></li>
<li><a href="#">火龙果</a></li>
<li><a href="#">梨子</a></li>
</ul>
</li>
</ul>
