美丽的树形菜单，可折叠，有动画

<div class="lmenu">
	<ul>
		<li aid="26">
			<span> <em class="icoopen"></em>
				易语言专题学习
			</span>
			<ul style="display: none;">
				<li aid="27"> <em class="iconleaf"></em>
					网页填表专题
				</li>
				<li aid="28">
					<em class="iconleaf"></em>
					网页封包专题
				</li>
				<li aid="29">
					<em class="iconleaf"></em>
					API一日一练专题
				</li>
			</ul>
		</li>
		<li aid="1">
			<span>
				<em class="icoclose"></em>
				易语言工具箱
			</span>
			<ul style="display: block;">
				<li aid="4">
					<em class="iconleaf"></em>
					易语言帮助文档
				</li>
				<li aid="2">
					<em class="iconleaf"></em>
					易语言支持库
				</li>
				<li aid="8">
					<span>
						<em class="icoclose2"></em>
						编程辅助
					</span>
					<ul>
						<li aid="10">
							<em class="iconleaf2"></em>
							易语言黑月
						</li>
						<li aid="3">
							<em class="iconleaf2"></em>
							易语言皮肤
						</li>
						<li aid="9">
							<em class="iconleaf2"></em>
							易语言编程工具
						</li>
					</ul>
				</li>
				<li aid="5">
					<span>
						<em class="icoclose2"></em>
						易语言模块
					</span>
					<ul>
						<li aid="7">
							<em class="iconleaf2"></em>
							易语言模块源代码
						</li>
						<li aid="6">
							<em class="iconleaf2"></em>
							易语言成品模块
						</li>
					</ul>
				</li>
			</ul>
		</li>
		<li aid="11">
			<span>
				<em class="icoclose"></em>
				易语言源代码
			</span>
			<ul>
				<li aid="17">
					<span>
						<em class="icoclose2"></em>
						易语言行业源代码
					</span>
					<ul>
						<li aid="25">
							<em class="iconleaf2"></em>
							网络相关
						</li>
						<li aid="23">
							<em class="iconleaf2"></em>
							模块控件
						</li>
						<li aid="22">
							<em class="iconleaf2"></em>
							数据库类
						</li>
						<li aid="21">
							<em class="iconleaf2"></em>
							游戏娱乐
						</li>
						<li aid="20">
							<em class="iconleaf2"></em>
							多媒体类
						</li>
						<li aid="19">
							<em class="iconleaf2"></em>
							图形图像
						</li>
						<li aid="18">
							<em class="iconleaf2"></em>
							系统工具
						</li>
						<li aid="24">
							<em class="iconleaf2"></em>
							行业软件
						</li>
					</ul>
				</li>
				<li aid="12">
					<span>
						<em class="icoclose2"></em>
						易语言学习例程
					</span>
					<ul>
						<li aid="15">
							<em class="iconleaf2"></em>
							进阶例程
						</li>
						<li aid="16">
							<em class="iconleaf2"></em>
							高级例程
						</li>
						<li aid="14">
							<em class="iconleaf2"></em>
							0基础例程
						</li>
						<li aid="13">
							<em class="iconleaf2"></em>
							入门例程
						</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>



<style>
*{
	margin: 0;
	padding: 0;
}
.icoopen , .icoopen2 , .icoclose , .icoclose2 , .iconleaf , .iconleaf2 ,.lmenu ul li span ,.search-side button{background: url("doc.png") no-repeat 0 0; 9px;height: 9px;top: 9px;}
.lmenu li{list-style: none;}
.lmenu em {display: block;position: absolute;cursor: pointer;}
.icoopen{left: 28px;background-position: 0 -39px;}
.icoopen2{left: 42px;background-position: -46px -88px;}
.icoclose{left: 28px;background-position: -45px -39px;}
.icoclose2{left: 42px;background-position: 0 -88px;}

.iconleaf , .iconleaf2{ 3px;height: 5px;background-position: -87px -41px;}

.iconleaf {left: 47px;top: 11px;}
.iconleaf2 {left: 72px;top: 10px;}

.search-side{
	 250px;
	border-radius: 5px;
	position: relative;
	background-color: #FFFFFF;
	border: 1px solid #ddd;
	height: 36px;
	line-height: 36px;
}
.search-side button{
	background-position: 0 0;
	border: 0 none;
	cursor: pointer;
	display: block;
	height: 16px;
	 16px;
	position: relative;
	left: 11px;
}
.search-box input{
	position: absolute;
	top: 11px;
	background-color: transparent;
	border: medium none;
	color: #AFB0B0;
	height: 16px;
	margin-left: 37px;
	outline: medium none;
	 200px;
}


.lmenu{
	 250px;
	height: auto;
	overflow: hidden;
	font-family: "宋体",Tahoma, Helvetica, "Microsoft Yahei", "微软雅黑", Arial, STHeiti;
	margin-bottom: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
}

.lmenu ul li{
	position: relative;
	cursor: pointer;
}
.lmenu ul li ul{
	max-height: 350px;
	overflow: auto;
}
.lmenu ul li ul li ul{
	height: auto;
}
.lmenu ul li span{
	display: block;
	 100%;
	height: 28px;
	line-height: 28px;
	text-indent: 3em;
	/*font-weight: bolder;*/
	font-size: 14px;
	color: #0E3E5E;
	border-bottom: 1px solid #D7D7D7;
	background-position: -46px 0;
}
.lmenu ul li ul li , .lmenu ul li ul li span{
	/*background-color: #F7F8F8;*/
	background-color: #FFFFFF;
	color: #333;
	text-indent: 5em;
	font-size: 13px;
	height: auto;
	line-height: 28px;

}
.lmenu ul li ul li span{
	background:none;

}
.lmenu ul li ul li ul li{
	border:none;
	text-indent: 7em;
	font-size: 12px;
	font-weight: normal;
	height: 24px;
	line-height: 24px;
}
</style>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script>
$(function() {
			loadMenu(function (id){
				window.location= '/index.php/index/baoku' + '/id/' + id + '.html';
			});
			$('li[aid=]').css('background',"#F5F5F5");


		});


	/*传入一个函数參数为 id 即li上的属性 aid*/
	function loadMenu (fun_clickAction) {
		/*事件回调函数*/
		clickAction = fun_clickAction;
		/*一级菜单的样式*/
		$(".lmenu > ul > li > span").prepend('<em class="icoclose"></em>');
		/*二级菜单的样式*/
		$(".lmenu > ul > li > ul > li").each(function(){
			/*检查是否有节点*/
			span = $(this).find("span"); 
			if ( span.length ){
				//有节点的话
				span.prepend('<em class="icoclose2"></em>');
			}else{
				//无节点的话,绑定事件
				$(this).prepend('<em class="iconleaf"></em>')
					   .click(function(){
							clickAction($(this).attr('aid'));
					   });
			}
		});
		/*三级菜单的样式*/
		$(".lmenu > ul > li > ul > li > ul > li")
			.prepend('<em class="iconleaf2"></em>')
			.click(function(){
				clickAction($(this).attr('aid'));
			});

		$(".lmenu ul li span").click(function(){
			var ye = $(this).find('em');
			classNama = ye.attr("class");
			if( classNama == 'icoclose'){ye.attr('class','icoopen');}
			else if( classNama == 'icoopen' ){ye.attr('class','icoclose');}
			else if( classNama == 'icoclose2'){ye.attr('class','icoopen2');}
			else if( classNama == 'icoopen2' ){ye.attr('class','icoclose2');}
			$(this).siblings("ul").slideToggle("normal","swing");
		});
	}

</script>

遇到什么不懂的能够找我QQ啊 496928838