使用css、li、ul、div及js制作二级树形下拉菜单

注意事项：二级菜单并非ul li ul嵌套，就是第一级的ul和li，只是将一级菜单和二级菜单分别写两个菜单style

/*css代码*/

                     /*这是一级菜单的style*/

.leftmenucontainer {                                         
         width: 70%;
         margin: 5px 5px 5px 10px;
         border: 1px solid #666;
   padding:5px 5px 5px 5px;
}

#menuleft {
         width: 140px;
         border: 1px solid #ccc;
   color: #505050;
         display: block;
         background: url(../images/menu3.gif);
         padding: 0 0 0 0;
         }

#menuleft li a {
           height: 32px;
           height: 24px;
           text-decoration: none;
         }

#menuleft li a:link,#menuleft li a:visited {
         color: #505050;
         display: block;
         background: url(../images/menu3.gif);
         padding: 8px 0 0 30px;
         }

#menuleft li a:hover,#menuleft li a:active {
         color: #013676;
         background: url(../images/menu3.gif) 0 -32px;
         padding: 8px 0 0 30px;
         }
                         /*这是二级菜单的style*/
#leftmenu2 {
         float:inherit;
         width: 140px;
         border-color: #D0D0D0;
         border-width: 1px;
         }

#leftmenu2 li a {
           height: 32px;
           height: 24px;
           text-decoration: none;
     BACKGROUND: url(../images/arrow.gif) no-repeat 8px 8px 8px 8px;
         }

#leftmenu2 li a:link, #leftmenu2 li a:visited {
         color: #FFF;
         background:   url(../images/menu5.gif);
         padding: 8px 0 0 30px;
         }

#leftmenu2 li a:hover, {
         color: #FFF;
         background:   url(../images/menu5.gif) 0 -32px;
         padding: 8px 0 0 30px;
         }

/*js代码*//*将js代码嵌入到<style></style>标签下方*/

<script language="JavaScript" type="text/JavaScript">
function change_view(obj_name)
                {
                   var aa=document.getElementById(obj_name);
                   if(aa.style.display=="")
                         {
                            aa.style.display="none";
                         }
                   else
                         {
                            aa.style.display="";
                         }
                }

</script>

/*html代码*/

     <td width="20%">
         <div id="menuleft" class="leftmenucontainer">
              <ul ><li onClick="change_view('a1')"><a href="#">办理入园手续</a></li></ul>
       <div id="leftmenu2">        /*这是二级菜单style*/
        <ul id="a1">                    /*这是js程序调用的id*/
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
        </ul>
       </div>
       <ul ><li onClick="change_view('a2')"><a href="#">企业基本数据采集</a></li></ul>
       <div id="leftmenu2">
        <ul id="a2" style="display:none">
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
        </ul>
       </div>
       <ul ><li onClick="change_view('a3')"><a href="#">动态孵化数据采集</a></li></ul>
       <div id="leftmenu2">
        <ul id="a3" style="display:none">
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
        </ul>
       </div>
       <ul ><li onClick="change_view('a4')"><a href="#">日常服务</a></li></ul>
       <div id="leftmenu2">
        <ul id="a4" style="display:none">
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
        </ul>
       </div>
       <ul ><li onClick="change_view('a5')"><a href="#">资源管理</a></li></ul>
       <div id="leftmenu2">
        <ul id="a5" style="display:none">
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
        </ul>
       </div>
       <ul ><li onClick="change_view('a6')"><a href="#">系统管理</a></li></ul>
       <div id="leftmenu2">
        <ul id="a6" style="display:none">
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
        </ul>
       </div>

         </div>
</td>