其实这个不难。
<div id="nav">
<ul>
<li>
<div class="first">账号管理</div>
<ul class="second">
<li>账号注册</li>
<li>找回密码</li>
<li>账户关联登录</li>
<li>账号常见问题</li>
</ul>
</li>
<li>
<div class="first">购物指南</div>
<ul class="second">
<li>购物指南1</li>
<li>购物指南2</li>
<li>购物指南3</li>
<li>购物指南4</li>
</ul>
</li>
<li>
<div class="first">配送方式</div>
<ul class="second">
<li>配送方式1</li>
<li>配送方式2</li>
<li>配送方式3</li>
<li>配送方式4</li>
</ul>
</li>
<li>
<div class="first">支付方式</div>
<ul class="second">
<li>支付方式1</li>
<li>支付方式2</li>
<li>支付方式3</li>
<li>支付方式4</li>
</ul>
</li>
</ul>
</div>
样式:
/*nav*/
#nav{
position:absolute;
top:366px;
left:26px;
}
#nav ul{
list-style:none;
}
#nav ul li{
display:block;
width:196px;
line-height:30px;
border-bottom:1px solid #999;
}
#nav ul li div.first{
text-indent:20px;
border-bottom:1px solid #999;
}
#nav ul.second{
display:none;
}
#nav ul.second li{
display:block;
width:166px;
padding-left:30px;
height:30px;
line-height:30px;
border:none;
}
两种切换方式:
// $("#nav ul li ").hover(function(){
// $(".second").eq($(this).index()).show();
// //$(".second").hide().eq($(this).index()).show();
// $(".second").hide().eq($(this).index()).show();
//
// })
$(".first").hover(function(){
$(this).next().stop(true,true).show(1000).parent().siblings().find("ul").hide();
},function(){
$(this).next().hide(1000);
});
当然也可以将hover换成mouseout,或者toggle。好了就这样。