Tip: You can modify some of the code before running
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> vertical menu </title> <style type=" Text/css "> <!--body {font-family:arial, Song Body, serif; font-size:12px; } *{margin:0px; padding:0px;} #nav {width:174px; line-height:24px; List-style-type:none; Text-align:left; /* Defines the entire UL menu row height and background color/}/*================== directory ===================*/#nav a {width:174px; Display:block; padding-left:20px; /*width (must), otherwise the following Li will deform/} #nav li {border-bottom: #FFF 1px solid; * * Below a white edge * * FLOAT:LEFT; Background-color: #FECFD6; Color: #DD1336; Font-weight:bold; Background:url (.. /images/dot_o.gif) no-repeat 8px 8px; #nav li a:hover{background: #F85B78;/* The background Color/} #nav a:link {color: #DD1336; text-decoration:none;} #nav a:visited{color: #DD1336; text-decoration:none;} #nav a:hover {color: #FFF; Text-decoration:none;font-weight:bold}/*================== Level two directory ===================*/# Nav Li ul {list-style:none; Text-align:left; #nav Li ul li{background: #F5F5F5/* Level two directory background color/font-weight:normal;} #nav li ul a{padding-left:20px; width:174px; /* Padding-left The text in level two directory moves to the right, but the width must be reset = (total width-padding-left)///* Below is the link style of level two directory * * #nav li ul a:link {color: #666; text-dec Oration: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: #FFAA1C; /* Level two onmouseover font color, background color/}/*==============================*/#nav li:hover ul {left:auto;} #nav li.sfhover ul {L Eft:auto; } #content {clear:left; #nav ul.collapsed {Display:none}--> #PARENT {width:174px;} </style> </pead> <body> <div Id= "PARENT" > <ul id= "NAV" > <li> menu one <ul id= "ChildMenu1 "> <li> menu One </li> <li> menu one </li> <li> menu one </li> <li> menu one </li> ; <li> Menu One </li> <li> menu one </li> <li> menu one </li> <li> menu one </li> <li> menu One & Lt;/li> <li> Menu One </li> <li> menu one </li> <li> menu one </li> </ul> </li> <li> Menu Two <ul id= "ChildMenu2" class= "collapsed" > <li> menu two </li> <li> menu two </li> &l T;li> Menu Two </li> <li> menu two </li> <li> menu two </li> </ul> </li> <li> Menu Three <ul id= "ChildMenu3" class= "collapsed" > <li> menu three </li> <li> menu three </li> <li> menu three < /li> <li> Menu Three </li> <li> menu three </li> <li> menu three </li> </ul> </li> &L T;li> Menu Four <ul id= "ChildMenu4" class= "collapsed" > <li> menu four </li> <li> menu four </li> <li > Menu Four </li> <li> Menu Four </li> <li> menu four </li> <li> menu four </li> </ul> </li> <li> Menu Five < UL id= "ChildMenu5" class= "collapsed" > <li> menu Five </li> <li> menu five </li> <li> menu five </li> <li> Menu Five </li> <li> menu five </li> <li> menu five </li> <li> menu five </li> <li> menu Five </li> <li> menu five </li> <li> menu five </li> <li> menu five </li> <li> menu five </li> </ul> </li> <li> Menu six <ul id= "ChildMenu6" class= "collapsed" > <li> menu Six </li> <li> Menu Six </li> <li> menu six </li> </ul> </li> <li> menu seven <ul id= "Childmen U7 "class=" collapsed "> <li> menu Seven </li> <li> menu seven </li> </ul> </li> <li> Cuisine Single eight <ul id= "ChildMenu8" class= "collapsed" > <li> menu Eight </li> <li> menu eight </li> <li> menu eight & Lt;/li> </ul> </li> <li> Menu Nine <ul id= "ChildMenu9" class= "collapsed" > <li> menu nine </li> <li> menu nine </li> <li> Menu Nine </li> </ul> </li> <li> menu 10 <ul id= "ChildMenu10" class= "Col Lapsed "> <li> menu 10 </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, _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 (_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 (); * These two function order should pay attention to, otherwise in Firefox getmenuid () not effect menufix (); --></script> </ptml>
Tip: You can modify some of the code before running
