1 <html>
2 <head>
3 <title>树状列表结构测试</title>
4 <style type="text/css">
5 * {
6 margin:0;
7 padding:0;
8 border:0;
9 }
10 body {
11 font:12px/130% verdana, geneva, arial, helvetica, sans-serif, 宋体;
12 }
13 li {
14 list-style:none;
15 }
16 .clearfix:after {
17 content:" ";
18 display:block;
19 height:0;
20 clear:both;
21 visibility:hidden;
22 }
23 .clearfix {
24 display:inline-block;
25 }
26 a:link {
27 color:#000;
28 text-decoration:none;
29 }
30 a:visited {
31 color:#000;
32 text-decoration:none;
33 }
34 a:hover {
35 color:#000;
36 text-decoration:none;
37 }
38 .menu {
39 width:778px;
40 height:26px;
41 background:#fff;
42 margin:0 auto;
43 }
44 .menusel {
45 float:left;
46 width:100px;
47 position:relative;
48 height:25px;
49 background:#ddd;
50 line-height: 25px;
51 margin-left: 1px;
52 *margin-left: 0px;
53 _margin-left: -1px;
54 }
55 .menusel h2 {
56 font-size:12px;
57 }
58 .menusel a {
59 display: block;
60 text-align:center;
61 width:100px;
62 border:1px solid #a4a4a4;
63 height:25px;
64 border-bottom:1px solid #a4a4a4;
65 position:relative;
66 z-index:2;
67 }
68 .menusel a:hover {
69 border:1px solid #a4a4a4;
70 border-bottom:1px dashed #eeeeee;
71 position:relative;
72 z-index:2;
73 height:25px;
74 }
75 .ahover a {
76 border-bottom:1px dashed #eeeeee;
77 background:#eeeeee;
78 }
79 .position {
80 position:absolute;
81 z-index:1;
82 }
83 .menusel ul {
84 width:125px;
85 background:#eee;
86 border:1px solid #a4a4a4;
87 margin-top: -1px;
88 position:relative;
89 z-index:1;
90 display:none;
91 }
92 .menusel .block {
93 display:block;
94 }
95 .typeul li {
96 border-bottom:1px dashed #a4a4a4;
97 width:125px;
98 position:relative;
99 float:left;
100 }
101 .typeul li a {
102 border:none;
103 width:125px;
104 }
105 .typeul li a:hover {
106 border:none;
107 background:#ddd;
108 }
109 .typeul {
110 margin-left:0;
111 }
112 .typeul ul {
113 left:125px;
114 top:0;
115 position:absolute;
116 }
117 .fli {
118 margin-left: -1px;
119 border-left:#eeeeee solid 1px;
120 }
121 .menusel .lli {
122 border:none;
123 }
124 </style>
125 <script type="text/javascript">
126 document.execCommand("BackgroundImageCache", false, true);
127 </script>
128 <!-- IE6背景图片闪烁问题 -->
129 </head>
130 <body>
131 <div class="menu">
132 <div id="menu1" class="menusel">
133 <h2><a href="http://www.codefans.net/jscss/">菜单1</a></h2>
134 <div class="position">
135 <ul class="clearfix typeul">
136 <li><a href="#">菜单选项1-2</a></li>
137 <li> <a href="#">菜单选项1-2</a>
138 <ul>
139 <li class="fli"><a href="#">菜单选项1-2-1</a></li>
140 <li class="lli"><a href="#">菜单选项1-2-2</a></li>
141 </ul>
142 </li>
143 <li><a href="http://www.codefans.net">菜单选项1-2</a></li>
144 <li class="lli"><a href="#">菜单选项1-2</a></li>
145 </ul>
146 </div>
147 <!-- position -->
148 </div>
149 <!-- menusel -->
150 <div id="menu2" class="menusel">
151 <h2><a href="#">菜单2</a></h2>
152 <div class="position">
153 <ul class="clearfix typeul">
154 <li><a href="#">菜单选项2-2</a></li>
155 <li><a href="#">菜单选项2-2</a>
156 <ul>
157 <li class="fli"><a href="#">菜单选项2-2-1</a></li>
158 <li class="lli"><a href="#">菜单选项2-2-2</a>
159 <ul>
160 <li class="fli"><a href="#">菜单选项2-2-1</a></li>
161 <li class="lli"><a href="#">菜单选项2-2-2</a> </li>
162 </ul>
163 </li>
164 </ul>
165 </li>
166 <li><a href="#">菜单选项2-2</a></li>
167 <li class="lli"><a href="#">菜单选项2-2</a></li>
168 </ul>
169 </div>
170 <!-- position -->
171 </div>
172 <!-- menusel -->
173 <div id="menu3" class="menusel">
174 <h2><a href="#">菜单3</a></h2>
175 <div class="position">
176 <ul class="clearfix typeul">
177 <li><a href="#">菜单选项3-2</a></li>
178 <li><a href="#">菜单选项3-2</a>
179 <ul>
180 <li class="fli"><a href="#">菜单选项3-2-1</a></li>
181 <li class="lli"><a href="#">菜单选项3-2-2</a>
182 <ul>
183 <li class="fli"><a href="#">菜单选项3-2-1</a></li>
184 <li class="lli"><a href="#">菜单选项3-2-2</a>
185 <ul>
186 <li class="fli"><a href="#">菜单选项3-2-1</a></li>
187 <li class="lli"><a href="#">菜单选项3-2-2</a></li>
188 </ul>
189 </li>
190 </ul>
191 </li>
192 </ul>
193 </li>
194 <li><a href="#">菜单选项3-2</a></li>
195 <li class="lli"><a href="#">菜单选项3-2</a></li>
196 </ul>
197 </div>
198 <!-- position -->
199 </div>
200 <!-- menusel -->
201 </div>
202 <!-- menu -->
203 <script type="text/javascript">
204 for (var x = 1; x < 4; x++) {
205 var menuid = document.getElementById("menu" + x);
206 menuid.num = x;
207 type();
208 }
209 function type() {
210 var menuh2 = menuid.getElementsByTagName("h2");
211 var menuul = menuid.getElementsByTagName("ul");
212 var menuli = menuul[0].getElementsByTagName("li");
213 menuh2[0].onmouseover = show;
214 menuh2[0].onmouseout = unshow;
215 menuul[0].onmouseover = show;
216 menuul[0].onmouseout = unshow;
217 function show() {
218 menuul[0].className = "clearfix typeul block"
219 }
220 function unshow() {
221 menuul[0].className = "typeul"
222 }
223 for (var i = 0; i < menuli.length; i++) {
224 menuli[i].num = i;
225 var liul = menuli[i].getElementsByTagName("ul")[0];
226 if (liul) {
227 typeshow()
228 }
229 }
230 function typeshow() {
231 menuli[i].onmouseover = showul;
232 menuli[i].onmouseout = unshowul;
233 }
234 function showul() {
235 menuli[this.num].getElementsByTagName("ul")[0].className = "block";
236 }
237 function unshowul() {
238 menuli[this.num].getElementsByTagName("ul")[0].className = "";
239 }
240 }
241 </script>
242 </body>
243 </html>
时间： 2024-10-18 03:12:35