菜单设置：点击第一级菜单，第二级菜单在下方出现，并且下方的一级菜单自动下移
html代码：
<body>
<div>
<ul class="main">
<li class="nav"><a href="#">文创商户</a>
<ul class="navcontent">
<li style="margin-top:10px">文创商户01</li>
<li>文创商户02</li>
<li>文创商户03</li>
</ul>
</li>
<li class="nav"><a href="#">特色餐饮</a>
<ul class="navcontent">
<li style="margin-top:10px">特色餐饮01</li>
<li>特色餐饮02</li>
<li>特色餐饮03</li>
</ul>
</li>
<li class="nav"><a href="#">后台专区</a>
<ul class="navcontent">
<li style="margin-top:10px">搜索优化</li>
<li>CSS专区</li>
<li>ASP专区</li>
</ul>
</li>
</ul>
</div>
</body>css代码：
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
font-size: 14px;
}
ul
{
list-style: none;
}
.main
{
margin: auto;
margin-top: 40px;
position: relative;
width: 100px;
min-width: 50px;
height: 200px;
}
.main .nav
{
width: 100px;
margin: 0px auto;
margin-top: 10px;
}
.main .nav a
{
width: 100px;
height: 50px;
line-height: 3.5;
text-align: center;
text-decoration: none;
background-color: red;
display: block;
color:Black;
font-weight:bold;
}
.navcontent
{
padding-left: 0;
padding-top: 0;
margin-top: 0;
list-style: none;
overflow: hidden;
text-align: right;
margin-bottom: 1px;
text-align: center;
transition: all .4s ease-out;
height: 100%;
}
.navcontent li{
border-radius: 2px;
position: relative;
display: inline-block;
margin-left: 35px;
line-height: 3.5;
height:50px;
width: 100%;
margin: 0;
margin-bottom: 10px;
transition: background 3s;
box-shadow: 2px 2px 10px -2px rgba(0,0,0,.35);
background-color: rgba(0,0,0,0);
color:Black;
font-weight:bold;
}
.main .nav .navcontent
{
display: none;
}
</style>JavaScript代码：
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var navs = $(".nav");
var navcontents = $(".navcontent");
var navlen = navs.length;
$(".nav a").click(function () {
if ($(this).siblings().css("display") == "none") {
$(this).siblings().css("display", "block")
}
else {
$(this).siblings().css("display", "none")
}
})
})
</script>效果如下：
点击后：