<!DOCTYPE html>
<meta charset="utf-8">
<title>树练习1</title>
<style>
html,body,ul,li,h3{padding:0;margin:0}
ul{list-style-type:none}
html{font-size:12px;}
.sub_nav{ 150px;}
.sub_nav h3{ height:29px; line-height:29px; border-bottom:1px solid #999; font-size:14px; cursor:pointer; text-indent:10px;}
.cur{ color:#f00;}
.sub_nav ul{ border:1px solid #ccc; border-top:none; display:none;}
.sub_nav li{ height:21px; line-height:21px; text-indent:30px;}
</style>
<div class="sub_nav">
<h3>学员姓名</h3>
<ul>
<li>小A
<li>小B
<li>小C
</ul>
<h3>学员职业</h3>
<ul>
<li>扫地
<li>倒水
<li>擦桌子
</ul>
<h3>学员年龄</h3>
<ul>
<li>22
<li>33
<li>44
</ul>
</div>
<script src="jquery-1.8.3.min.js"></script>
<script>
$('h3').hover(function(){
$(this).siblings('h3').removeClass('cur').siblings('ul').hide();
$(this).addClass('cur').next().show();
});
</script>