<style type="text/css">
*{ margin:0px auto; padding:0px; font-family:微软雅黑; font-size:14px;}
.zhu{ width:200px; height:30px; text-align:center; line-height:30px; vertical-align:middle; background-color:#03C; color:white;}
.zi{ width:200px; display:none}
.list{ width:198px; height:30px; text-align:center; line-height:30px; vertical-align:middle; border-left:1px solid #999;border-right:1px solid #999;}
#z4{ border-bottom:1px solid #999;}
</style>

<div  style="width:200px; height:600px; margin-top:30px">
 <div class="zhu" onclick="Show(‘z1‘)">
     首页
    </div>
      <div class="zi" id="z1">
     　　<div class="list">你好</div>
          <div class="list">首页</div>
      </div>
    <div class="zhu" onclick="Show(‘z2‘)">
     教务信息
    </div>
      <div class="zi" id="z2">
     　　<div class="list">你好</div>
          <div class="list">首页</div>
      </div>
    <div class="zhu" onclick="Show(‘z3‘)">
     下载专区
    </div>
      <div class="zi" id="z3">
     　　<div class="list">你好</div>
          <div class="list">首页</div>
    </div>
    <div class="zhu" onclick="Show(‘z4‘)">
     学员信息管理
    </div>
      <div class="zi" id="z4">
    　　 <div class="list">你好</div>
          <div class="list">首页</div>
    </div>
</div>

<script type="text/javascript">

function Show(id)

{    

　　var z = document.getElementById(id);    

　　if(z.style.display=="block")  

　　{   

　　z.style.display = "none";

　　 }

 else  

　　{　　  

　　 z.style.display = "block";  

　　}

}

</script>

例子：侧面菜单下拉效果