下拉菜单

<!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>