A div+css+js-made tree menu that can be refreshed

css|js| Menu | refresh

Div+css+js Group and can achieve a lot of nice special effects, here recommend a refreshing Drop-down menu source code :

<style type= "Text/css" ><!--*{margin:0;padding:0;border:0;} Body {font-family:arial, XXFarEastFont-Arial, serif; font-size:12px;} #nav {width:180px; line-height:24px; List-style-type:none; Text-align:left; /* Defines the entire UL menu row height and background color */}/*================== directory ===================*/#nav a {width:160px; Display:block; padding-left:20px; /*width (must), otherwise the following Li will be deformed/} #nav li {background: #CCC;/* First-level directory background Color * * Border-bottom: #FFF 1px solid;//Below a white edge * * FLOAT:LEFT; /*float:left, this should not be set, but because in Firefox can not normally display the inherited nav width, limit breadth, Li automatic downward extension/} #nav li a:hover{background: #CC0000; First level directory onmouseover display background color/} #nav a:link {color: #666; text-decoration:none;} #nav a:visited {color: #666; text-decoration:none;} #nav a:hover {color: #FFF; text-decoration:none;font-weight:bold;} /*================== Level Two catalogue ===================*/#nav Li ul {list-style:none; text-align:left;} #nav Li ul li{background: #EBEBEB/* Level two directory background color/} #nav li ul a{padding-left:20px; width:160px; /* Padding-left The text in the level two directory moves to the right, but the width must be reset = (total width-paddiNg-left) */}/* Below is a level two directory link style */#nav li ul a:link {color: #666; text-decoration:none;} #nav Li ul a:visited {color: #666; text-decoration:none;} #nav Li ul a:hover {color: #F3F3F3; text-decoration:none; font-weight:normal background: #CC0000;/* Level two onmouseover font color, Background color */}/*==============================*/#nav li:hover ul {left:auto;} #nav Li.sfhover ul {left:auto;} #content {clear:left;} #nav ul.collapsed {Display:none} --> #PARENT {width:300px; padding-left:20px;} </style><div id= "PARENT" ><ul id= "nav" ><li><a href= "#Menu =childmenu1" > My website </a> <ul id= "ChildMenu1" class= "collapsed" > <li><a href= "http://www.webjx.com" target= "_blank" > Web page Teaching Network </a></li> <li><a href= "#" > Management </a></li> <li><a href= "http:// Www.webjx.com "target=" _blank "> Web Teaching Network </a></li> <li><a href=" # "> Management </a></li> <li><a href= "http://www.webjx.com" target= "_blank" > Web Teaching Network </a></li> <li><a href= "#" > Management </a></li> </ul></li><li><a href= "#Menu ChildMenu2 "> My account </a> <ul id=" ChildMenu2 "class=" collapsed "> <a href=" http://www.webjx.com "target= "_blank" > Payment </a></li> <li><a href= "#" > Management </a></li> <li><a href= "#" > Online Payment </a></li> <li><a href= "#" > Registered remittance </a></li> <li><a href= "#" > Online found </a></li> <li><a href= "#" > Historical accounts </a></li> </ul></li><li> <a href= "#Menu =childmenu3" > Site Administration </a> <ul id= "ChildMenu3" class= "collapsed" > <li><a href= "# "> Login </a></li> <a href=" http://www.webjx.com "target=" _blank "> Management </a></li> <li ><a href= "#" > Management </a></li> <li><a href= "#" > Management </a></li> </ul></ Li><li><a href= "#Menu =childmenu4" > Site Administration </a> <ul id= "ChildMenu4" class= "CoLlapsed "> <li><a href=" # "> Login </a></li> <a href=" http://www.webjx.com "target=" _blank " > Management </a></li> <li><a href= "#" > Management </a></li> <li><a href= "#" > Management < /a></li> <li><a href= "#" > Management </a></li> </ul></li></ul></div ><script type=text/javascript><!--var lastleftid = ""; function Menufix () {var obj = document.getElementById ("Nav"). getElementsByTagName ("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 (? | ^), "sfhover\\b"); }}}function Domenu (emid) {var obj = DocumeNt.getelementbyid (Emid); Obj.classname = (obj.className.toLowerCase () = = "Expanded"? Collapsed ":" expanded "); if ((lastleftid!= ") && (Emid!=lastleftid))//Close the previous menu {document.getElementById (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, _p Aramstr.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 (_paramarr.length>0) {var _arr = new Array (_paramarr.length); //Take all # behind, the menu only needs to be used to//for (var i = 0; i < _paramarr.length; i++) {var _paramkeyval = _paramarr[i].split (' = ') ; if (_PARAMKEYVAL.Length>0) {_arr[_paramkeyval[0]] = _paramkeyval[1]; } */} if (menuid!= "") {Domenu (MENUID)}}getmenuid (); * The order of the two function should be noted, otherwise in Firefox getmenuid () no effect menufix ();--></script>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]