折叠样式菜单

<ul class="menu-list">
			<li>
				<p class="menu_head">目标管理</p>
				 <div class="menu_body">
					 <a href="">主题空间</a>
					 <a href="">项目任务</a>
					 <a href="">工作计划</a>
					 <a href="">日程事件</a>
					 <a href="">时间视图</a>
				 </div>
			</li>
			
			<li>
				<p class="menu_head">会议管理</p>
				 <div class="menu_body">
					 <a href="">主题空间</a>
					 <a href="">会议安排</a>
					 <a href="">代开会议</a>
					 <a href="">已开会议</a>
					 <a href="">会议资源</a>
				 </div>
			</li>
			
			<li>
				<p class="menu_head">知识社区</p>
				 <div class="menu_body">
					 <a href="">我的收藏</a>
					 <a href="">知识广场</a>
					 <a href="">文档中心</a>
					 <a href="">我的博客</a>
					 <a href="">文档库管理</a>
				 </div>
			</li>
			
			
			<li>
				<p class="menu_head">我的工具</p>
				 <div class="menu_body">
					 <a href="">综合查询</a>
					 <a href="">通讯录</a>
					 <a href="">便签</a>
					 <a href="">计算器</a>
					 <a href="">万年历</a>
					 <a href="">常用链接</a>
				 </div>
			</li>
		</ul>
		<script type="text/javascript">
			$('.menu_head + div').hide();
			$('.menu_head ').click(function(){
			$(this).css('backgroundImage','(url(img/pro_down.png)');
			$(this).next('div').show();
			var parentli = $(this).parent('li');
			var lis = parentli.siblings('li');
			lis.children('p').css('backgroundImage','url(img/pro_left.png)');
			lis.children('div').hide();
			});
		</script>
	</body>
</html>

1. css代码

* {
    padding: 0;
    margin: 0;
}
ul {
    list-style-type: none;
    margin: 100px;
}
.menu_head {
    width: 185px;
    height: 47px;
    line-height: 47px;
    padding-left: 38px;
    font-size: 17px;
    color: #475052;
    cursor: pointer;
    border: 1px solid #e1e1e1;
    position: relative;
    margin: 0px;
    font-weight: bold;
    background: #f1f1f1 url(../img/pro_left.png) center right no-repeat;
}
.menu_list .current {
    background: #f1f1f1 url(../img/pro_down.png) center right no-repeat;
}
.menu_body {
    width: 223px;
    height: auto;
    overflow: hidden;
    line-height: 38px;
    border-left: 1px solid #e1e1e1;
    backguound: #fff;
    border-right: 1px solid #e1e1e1;
}
.menu_body a {
    display: block;
    width: 223px;
    height: 38px;
    line-height: 38px;
    padding-left: 38px;
    color: #777;
    background: #fff;
    text-decoration: none;
    border-bottom: 1px solid #e1e1e1;
}