1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3 <head>
4 <title>竖向简洁的折叠菜单_网页代码站(www.webdm.cn)</title>
5 <style>
6 #outer {width:504px; height:510px; position:relative; background:url(http://www.webdm.cn/images/20090910/red_frog.jpg) no-repeat 0px 160px;}
7 #outer #content {clear:left; position:absolute; left:230px; top:10px; width:250px; z-index:10;}
8 #menu {list-style-type:none; padding:0; margin:0; width:125px; position:absolute; top:70px; left:0; border:1px solid #fff; border-width:0 1px
9
10 1px; z-index:100;}
11 #menu ul {list-style-type:none; padding:0; margin:0; width:125px;}
12 #menu li {float:left; background:#657; position:relative; border-top:1px solid #fff;}
13 #menu li.sub {background:#d30;}
14 #menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:125px; text-
15
16 decoration:none; cursor:pointer; font-weight:bold; text-indent:5px;}
17 #menu ul,
18 #menu li.click ul ul,
19 #menu li.click ul li.hover ul ul {display:none;}
20 #menu li.hover {color:#ff0; z-index:500;}
21 #menu li.click {color:#ff0;}
22 #menu li.click ul {display:block;}
23 #menu li.click ul li.hover ul,
24 #menu li.click ul li.hover ul li.hover ul {display:block; position:absolute; left:110px; top:-1px; border:1px solid #fff; border-width:0 1px
25
26 1px;}
27 #menu li.click ul li.fly {background: #657 url(frog_arrow.gif) no-repeat top right;}
28 #menu li.click ul li.hover {background:#98a;}
29 #menu li.click ul li.hover ul li {background:#c60;}
30 #menu li.click ul li.hover ul li.hover ul li {background:#780; z-index:500;}
31 #menu li.click ul li.hover ul li.fly {background: #c60 url(frog_arrow.gif) no-repeat top right;}
32 #menu li.click ul li.hover ul li.hover {z-index:500; background:#fa4;}
33 #menu li.click ul li.hover ul li.hover a {color:#000;}
34 #menu li.click ul li.hover ul li.hover ul li.hover {background:#aa0;}
35 #menu li.click ul li.hover ul li.hover ul li.hover a {color:#fff;}
36 #outer img {display:block; float:right;}
37 #outer p {margin:0px; padding:17px 0 0 0; color:#000; font-size:12px; font-family:arial, sans-serif; text-align:justify;}
38 </style>
39
40 <script type="text/javascript">
41 clickMenu = function(menu) {
42 var getEls = document.getElementById(menu).getElementsByTagName("LI");
43 var getAgn = getEls;
44
45 for (var i=0; i<getEls.length; i++) {
46 getEls[i].onclick=function() {
47 for (var x=0; x<getAgn.length; x++) {
48 getAgn[x].className=getAgn[x].className.replace("unclick", "");
49 getAgn[x].className=getAgn[x].className.replace("click", "unclick");
50 }
51 if ((this.className.indexOf('unclick'))!=-1) {
52 this.className=this.className.replace("unclick", "");;
53 }
54 else {
55 this.className+=" click";
56 }
57 }
58 getEls[i].onmouseover=function() {
59 this.className+=" hover";
60 }
61 getEls[i].onmouseout=function() {
62 this.className=this.className.replace("hover", "");
63 }
64 }
65 }
66 </script>
67
68 </head>
69
70 <body onload="clickMenu('menu')">
71 <div id="outer">
72 <ul id="menu">
73 <li class="sub">Types
74 <ul>
75 <li><a href="#nogo">Indian</a></li>
76 <li><a href="#nogo">韩国</a></li>
77 <li class="fly"><a href="#nogo">美国</a>
78 <ul>
79 <li><a href="#nogo">朝鲜</a></li>
80 <li class="fly"><a href="#nogo">南朝鲜</a>
81 <ul>
82 <li><a href="#nogo">西大街</a></li>
83 <li><a href="#nogo">东大街</a></li>
84 </ul>
85 </li>
86 </ul>
87 </li>
88 <li><a href="#nogo">日本语</a></li>
89 <li><a href="#nogo">简体中文</a></li>
90 </ul>
91 </li>
92 <li class="sub">地区分布
93 <ul>
94 <li class="fly"><a href="#nogo">北京</a>
95 <ul>
96 <li><a href="#nogo">Hemiphractus</a></li>
97 <li><a href="#nogo">Stefania</a></li>
98 </ul>
99 </li>
100 <li class="fly"><a href="#nogo">河南</a>
101 <ul>
102 <li><a href="#nogo">Acris</a></li>
103 <li><a href="#nogo">Anotheca</a></li>
104 <li><a href="#nogo">Trachycephalus</a></li>
105 </ul>
106 </li>
107 <li class="fly"><a href="#nogo9">武汉</a>
108 <ul>
109 <li><a href="#nogo">Boophis</a></li>
110 <li><a href="#nogo">Callixalus</a></li>
111 <li><a href="#nogo">Chiromantis</a></li>
112 </ul>
113 </li>
114 </ul>
115 </li>
116 <li class="sub">References
117 <ul>
118 <li><a href="/">Wikipedia</a></li>
119 <li><a href="#nogo11">Encyclopedia</a></li>
120 </ul>
121 </li>
122 <li class="sub">链接
123 <ul>
124 <li><a href="#nogo">网页代码站</a></li>
125 <li><a href="#nogo">百度搜索</a></li>
126 </ul>
127 </li>
128 </ul>
129 </div>
130 </body>
131 </html>
132 <br>
133 <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！
文章来自：http://www.webdm.cn/webcode/df1d1ce3-0de4-47af-a48a-e6a62900ecee.html