2019獨角獸企業重金招聘Python工程師標準>>>

代碼：
<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].οnmοuseοver=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].οnmοuseοut=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

轉載于:https://my.oschina.net/u/1161556/blog/141990

總結

以上是生活随笔為你收集整理的div+css+js 树形菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。