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

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

　　

注意事项：二级菜单并非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>