HTML：

<div id="firstpane" class="menu_list">
	<h3 class="menu_head current">哲學</h3>
	<div style="display:block" class="menu_body">
		<a href="http://www.cnblogs.com/0bug/">科學技術哲學</a>
		<a href="#">宗教學</a>
		<a href="#">美學</a>
		<a href="#">倫理學</a>
		<a href="#">邏輯學</a>
		<a href="#">外國哲學</a>
		<a href="#">中國哲學</a>
		<a href="#">馬克思主義哲學</a>
	</div>
	<h3 class="menu_head">經濟學</h3>
	<div style="display:none" class="menu_body">
		<a href="#">應用經濟學</a>
		<a href="#">理論經濟學</a>
		<a href="#">國民經濟學</a>
		<a href="#">區域經濟學</a>
		<a href="#">產業經濟學</a>
		<a href="#">國際貿易學</a>
		<a href="#">勞動經濟學</a>
		<a href="#">政治經濟學</a>
	</div>
	<h3 class="menu_head">法學</h3>
	<div style="display:none" class="menu_body">
		<a href="#">馬克思主義基本原理</a>
		<a href="#">馬克思主義發展史</a>
		<a href="#">馬克思主義中國化研究</a>
		<a href="#">國外馬克思主義研究</a>
		<a href="#">思想政治教育</a>
	</div>
	<h3 class="menu_head">教育學</h3>
	<div style="display:none" class="menu_body">
		<a href="#">體育人文社會學</a>
		<a href="#">體育教育訓練學</a>
		<a href="#">民族傳統體育學</a>
		<a href="#">發展與教育心理學</a>
		<a href="#">應用心理學</a>
		<a href="#">教育學原理</a>
		<a href="#">課程與教學論</a>
		<a href="#">比較教育學</a>
	</div>
	<h3 class="menu_head">工學</h3>
	<div style="display:none" class="menu_body">
		<a href="#">一般力學與力學基礎</a>
		<a href="#">固體力學</a>
		<a href="#">流體力學</a>
		<a href="#">工程力學</a>
		<a href="#">機械制造及其自動化</a>
		<a href="#">機械電子工程</a>
	</div>
</div>

css

.menu_list{width:268px;margin:0 auto;}
.menu_head{
	height: 47px;
	line-height: 47px;
	padding-left: 38px;
	font-size: 14px;
	color: #525252;
	cursor: pointer;
	border-left: 1px solid #e1e1e1;
	border-right: 1px solid #e1e1e1;
	border-bottom: 1px solid #e1e1e1;
	border-top: 1px solid #F1F1F1;
	position: relative;
	margin: 0px;
	font-weight: bold;
	background: #f1f1f1 url(images/pro_left.png) center right no-repeat;
}
.menu_list .current{background:#f1f1f1 url(images/pro_down.png) center right no-repeat;}
.menu_body{
	line-height: 38px;
	border-left: 1px solid #e1e1e1;
	backguound: #fff;
	border-right: 1px solid #e1e1e1;
}
.menu_body a{display:block;height:38px;line-height:38px;padding-left:38px;color:#777777;background:#fff;text-decoration:none;border-bottom:1px solid #e1e1e1;}
.menu_body a:hover{text-decoration:none;}

js

<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
	$("#firstpane .menu_body:eq(0)").show();
	$("#firstpane h3.menu_head").click(function(){
		$(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
		$(this).siblings().removeClass("current");
	});
	$("#secondpane .menu_body:eq(0)").show();
	$("#secondpane h3.menu_head").mouseover(function(){
		$(this).addClass("current").next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
		$(this).siblings().removeClass("current");
	});
});
</script>

引入的兩個圖片

pro_down.png

pro_left.png

效果

左側菜單 模板