好看的导航菜单

  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>