简易树形菜单(可伸缩)——具体现用现改

.paren{
border: 1px solid;
color: gray;
width: 100px;
font: bold;
}
.tool{
background-color: purple;
color: white;
padding-left: 5px;
border: 2px solid;
border-color: white;
font-size: 15px;
line-height: 20px;
}
.tool.current{
font-style: inherit;
font-weight: bold;
color:yellow;
}
.lev2 a{
padding-left: 20px;
line-height: 27px;
z-index: 2px;
}
.lev2{
background:#ececec;
}

//js块

$(function(){
$(".lev1 > a").click(function(){
$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
return false;
})

///

<div class="paren">
<ul>
<li class="lev1">
<a href="#" class="tool" title="这是唯品会的衬衫..爱买不买">小家电</a>
<ul class="lev2">
<li><a href="#">格兰仕</a></li>
<li><a href="#">阿尔族</a></li>
<li><a href="#">森马</a></li>
</ul>
</li>
<li class="lev1">
<a href="#" class="tool" title="这是聚美优品的羊毛衫..爱买不买">羊毛衫</a>
<ul class="lev2">
<li><a href="#">羊毛衫1</a></li>
<li><a href="#">羊毛衫2</a></li>
<li><a href="#">羊毛衫3</a></li>
</ul>
</li>
<li class="lev1">
<a href="#" class="tool" title="这是聚美优品的羽绒服..爱买不买">羽绒服</a>
<ul class="lev2">
<li><a href="#">羽绒服1</a></li>
<li><a href="#">羽绒服2</a></li>
<li><a href="#">羽绒服3</a></li>
</ul>
</li>
</ul>
</div>

简易树形菜单(可伸缩)——具体现用现改

原文：http://www.cnblogs.com/haohao111/p/5144494.html