div+css+js 樹形菜單

代碼：
<div class="main_2">
   <div class="m_left">
     <ul class="nav">
        <li id="bottom_none"><a href="#"  onClick="DoMenu('ChildMenu1')">稅務登記</a>
          <ul id="ChildMenu1" class="expanded">
            <li id="border_top"><a href="biangengdengji.html">變動登記</a></li>
            <li><a href="shelidengji.html">設立登記</a></li>
            <li><a href="#">復業登記</a></li>
            <li><a href="#">扣繳義務人登記</a></li>
            <li><a href="#">停業登記</a></li>
            <li><a href="#">外埠經營登記</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu2')">認定管理</a>
          <ul id="ChildMenu2" class="collapsed">
            <li id="border_top"><a href="#">稅務資格認證</a></li>
            <li><a href="#">稅務資格認證</a></li>
            <li><a href="#">稅務資格認證</a></li>
            <li><a href="#">稅務資格認證</a></li>
            <li><a href="#">稅務資格認證</a></li>
            <li><a href="#">稅務資格認證</a></li>
            <li><a href="#">稅務資格認證</a></li>

          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu3')">防僞稅控</a>
          <ul id="ChildMenu3" class="collapsed">
            <li id="border_top"><a href="fangzhishuishou.html">防僞稅控</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu6')">發票管理</a>
          <ul id="ChildMenu6" class="collapsed">
            <li id="border_top"><a href="#">發票拆本使用審批</a></li>
            <li><a href="#">發票拆本使用審批（行政許可）</a></li>
            <li><a href="#">發票拆本使用審批</a></li>
            <li><a href="#">發票拆本使用審批</a></li>
            <li><a href="#">發票拆本使用審批</a></li>
            <li><a href="#">發票拆本使用審批</a></li>
          </ul>
        </li>
       
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu4')">帳簿管理</a>
          <ul id="ChildMenu4" class="collapsed">
            <li id="border_top"><a href="#">記帳覈算</a></li>
            <li><a href="#">記帳覈算</a></li>
            <li><a href="#">記帳覈算</a></li>
            <li><a href="#">記帳覈算</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu5')">納稅申報</a>
          <ul id="ChildMenu5" class="collapsed">
            <li id="border_top"><a href="#">出口貨物退稅申報</a></li>
            <li><a href="#">出口貨物退稅申報</a></li>
            <li><a href="#">出口貨物退稅申報</a></li>
            <li><a href="#">出口貨物退稅申報</a></li>
            <li><a href="#">出口貨物退稅申報</a></li>
            <li><a href="#">出口貨物退稅申報</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu7')">稅款繳納</a>
          <ul id="ChildMenu7" class="collapsed">
            <li id="border_top"><a href="#">延期繳納稅款</a></li>
            <li><a href="#">延期繳納稅款</a></li>
            <li><a href="#">延期繳納稅款</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu8')">證實管理</a>
          <ul id="ChildMenu8" class="collapsed">
            <li id="border_top"><a href="#">補辦出口貨物報關單證實</a></li>
            <li><a href="#">補辦出口貨物報關單證實</a></li>
            <li><a href="#">補辦出口貨物報關單證實</a></li>
            <li><a href="#">補辦出口貨物報關單證實</a></li>
            <li><a href="#">補辦出口貨物報關單證實</a></li>
            <li><a href="#">補辦出口貨物報關單證實</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu9')">特殊稅種</a>
          <ul id="ChildMenu9" class="collapsed">
            <li id="border_top"><a href="#">車輛購置稅</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu10')">納稅檢查</a>
          <ul id="ChildMenu10" class="collapsed">
            <li id="border_top"><a href="#">稅務稽查</a></li>
            <li><a href="#">稅務違法違章的處罰</a></li>
            <li><a href="#">稅務機關行政執法的依據</a></li>
            <li><a href="#">稅務行政處罰聽證</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu11')">行政許可</a>
          <ul id="ChildMenu11" class="collapsed">
            <li id="border_top"><a href="#">企業銜頭髮票印製審批</a></li>
            <li><a href="#">企業銜頭髮票印製審批</a></li>
            <li><a href="#">企業銜頭髮票印製審批</a></li>
            <li><a href="#">企業銜頭髮票印製審批</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu12')">稅收優惠</a>
          <ul id="ChildMenu12" class="collapsed">
            <li id="border_top"><a href="#">車輛購置稅減免稅</a></li>
            <li><a href="#">車輛購置稅減免稅</a></li>
            <li><a href="#">車輛購置稅減免稅</a></li>
            <li><a href="#">車輛購置稅減免稅</a></li>
            <li><a href="#">車輛購置稅減免稅</a></li>
            <li><a href="#">車輛購置稅減免稅</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu13')">行政救濟</a>
          <ul id="ChildMenu13" class="collapsed">
            <li id="border_top"><a href="#">稅務行政賠償業務流程</a></li>
            <li><a href="#">稅務行政賠償業務流程</a></li>
            <li><a href="#">稅務行政賠償業務流程</a></li>
            <li><a href="#">稅務行政賠償業務流程</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu14')">稅務代理</a>
          <ul id="ChildMenu14" class="collapsed">
            <li id="border_top"><a href="#">代理的申請</a></li>
            <li><a href="#">代理的申請</a></li>
            <li><a href="#">代理的申請</a></li>
            <li><a href="#">代理的申請</a></li>
            <li><a href="#">代理的申請</a></li>
          </ul>
        </li>
        <li id="bottom_none"><a href="#" onClick="DoMenu('ChildMenu15')">擔保擔保</a>
          <ul id="ChildMenu15" class="collapsed">
            <li id="border_top"><a href="#">擔保</a></li>
          </ul>
        </li>
       </ul>
      </div>
    
     <div class="m_right"></div>
    </div>
CSS樣式：
body{margin:0px;padding:0px;color:#585858;font-size:12px;font-family: "宋體";line-height:20px;}
.clear{clear:both;}
ul{margin: 0;padding: 0;list-style-type: none;}
.main_2{width:805px; float:right;}
.m_left{width:190px; float:left;}
.m_right{ width:608px; float:right;}


            .nav {
             width:190px;
             list-style-type: none;
             text-align:left;
             overflow:hidden;
               
            }
           
            .nav a {
             width: 168px;
             display: block;
             padding-left:10px;
             
            }
            .nav li {
                border-top:#ebebeb 1px solid;
                border-bottom:#ebebeb 1px solid;
                float:left;
                line-height:28px;
                background-color: #f5f5f5;font-weight:bold;
                            }
            .nav li a{
                background-image: url(../images/jiantou.gif);
                background-repeat: no-repeat;
               
                background-position: 10px 12px;
                padding-left:20px;
                font-size: 14px;
                color:#585858;
                text-decoration: none;   
            }
            .nav li a:hover,.nav li a.hover{
                color:#4c657e;
                background-color: #f5f5f5;
               
             }
           
            .nav li ul {
             list-style:none;
             text-align:left;
             
            }
            .nav li ul li{
                border:none;
                background-color: #fff;
                 padding-left:3px;
                background-image: url(../images/dian.gif);
                background-repeat: no-repeat;
                background-position: 15px 10px; font-weight:normal;
            }
            .nav li ul li a{
                background-image: none;
                font-size:12px;
            }
            .nav li ul li a:hover,.nav li ul li a.hover {
                color:#4c657e;
                text-decoration:none;
                font-weight:normal;
                background:none;
                background-image: none;
            }
            .nav ul.collapsed {
             display: none;
            }
            #bottom_none{
            border-bottom: none;
            }
            #border_top{
            border-top:  solid 1px #ebebeb;
            }
js：
var LastLeftID = "";
function menuFix() {
 var obj = document.getElementByIdx_x("nav").getElementsByTagName_r("li");
 
 for (var i=0; i<obj.length; i++) {
  obj[i].onmouseover=function() {
   this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  obj[i].onMouseDown=function() {
   this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  obj[i].onMouseUp=function() {
   this.className+=(this.className.length>0? " ": "") + "sfhover";
  }
  obj[i].onmouseout=function() {
   this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
  }
 }
}
function DoMenu(emid)
{
 var obj = document.getElementByIdx_x(emid);
 obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
 if((LastLeftID!="")&&(emid!=LastLeftID)) //關閉上一個Menu
 {
  document.getElementByIdx_x(LastLeftID).className = "collapsed";
 }
 LastLeftID = emid;
}
function GetMenuID()
{
 var MenuID="";
 var _paramStr = new String(window.location.href);
 var _sharpPos = _paramStr.indexOf("#");
 
 if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1)
 {
  _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);
 }
 else
 {
  _paramStr = "";
 }
 
 if (_paramStr.length > 0)
 {
  var _paramArr = _paramStr.split("&");
  if (_paramArr.length>0)
  {
   var _paramKeyVal = _paramArr[0].split("=");
   if (_paramKeyVal.length>0)
   {
    MenuID = _paramKeyVal[1];
   }
  }
 
 }
 
 if(MenuID!="")
 {
  DoMenu(MenuID)
 }
}
GetMenuID(); //*這兩個function的順序要注意一下，否則在Firefox裏GetMenuID()不起效果

menuFix();

本文轉載：http://www.niwozhi.com/wenku_detail/264_34826.html