简单实用的下拉级联菜单

简单实用的下拉级联菜单（原生js）：

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2 
  3 <html xmlns="http://www.w3.org/1999/xhtml">
  4 
  5 <head>
  6 
  7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8 
  9 <title>JavaScript下拉菜单</title>
 10 
 11 <style type="text/css">
 12 
 13 * {padding:0; margin:0;}
 14 body {font-family:verdana, sans-serif;font-size:small;}
 15 #navigation, #navigation li ul {list-style-type:none;}
 16 #navigation {margin:20px;}
 17 #navigation li {float:left;text-align:center;position:relative;}
 18 #navigation li a:link, #navigation li a:visited {display:block;text-decoration:none; color:#000; width:120px; height:40px;line-height:40px;border:1px solid #fff;  border-width:1px 1px 0 0;background: #963;padding-left:10px;}
 19 #navigation li a:hover {color:#fff;background:#2687eb;}
 20 #navigation li ul li a:hover {color:#fff;background:#6b839c;}
 21 #navigation li ul {display:none;position:absolute;top:40px;left:0; margin-top:1px; width:120px;}
 22 #navigation li ul li ul {display:none;position:absolute;top:0px;left:130px;margin-top:0; margin-left:1px; width:120px;}
 23 </style>
 24     <script type="text/javascript">
 25 
 26         function displaySubMenu(li) {
 27 
 28             var subMenu = li.getElementsByTagName("ul")[0];
 29 
 30             subMenu.style.display = "block";
 31 
 32         }
 33 
 34         function hideSubMenu(li) {
 35 
 36             var subMenu = li.getElementsByTagName("ul")[0];
 37 
 38             subMenu.style.display = "none";
 39 
 40         }
 41 
 42     </script>
 43 
 44 </head>
 45 
 46 <body>
 47  <div style="width:800px; height:auto; background:#0FC;">
 48 
 49     <ul id="navigation">
 50 
 51         <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
 52 
 53             <a href="#">栏目1</a>   
 54 
 55             <ul>
 56 
 57                 <li><a href="#">栏目1->菜单1</a></li>
 58 
 59                 <li><a href="#">栏目1->菜单2</a></li>
 60 
 61                 <li><a href="#">栏目1->菜单3</a></li>
 62 
 63                 <li><a href="#">栏目1->菜单4</a></li>
 64 
 65             </ul>
 66 
 67         </li>
 68 
 69         <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
 70 
 71             <a href="#">栏目2</a>   
 72 
 73             <ul>
 74 
 75                 <li><a href="#">栏目2->菜单1</a></li>
 76 
 77                 <li><a href="#">栏目2->菜单2</a></li>
 78 
 79                 <li><a href="#">栏目2->菜单3</a></li>
 80 
 81                 <li><a href="#">栏目2->菜单4</a></li>
 82 
 83                 <li><a href="#">栏目2->菜单5</a></li>
 84 
 85             </ul>
 86 
 87         </li>
 88 
 89         <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
 90 
 91             <a href="#">栏目3</a>   
 92 
 93             <ul>
 94 
 95                 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
 96 
 97                     <a href="#">栏目3->菜单1</a>
 98 
 99                     <ul>
100 
101                         <li><a href="#">菜单1->子菜单1</a></li>
102 
103                         <li><a href="#">菜单1->子菜单2</a></li>
104 
105                         <li><a href="#">菜单1->子菜单3</a></li>
106 
107                         <li><a href="#">菜单1->子菜单4</a></li>
108 
109                     </ul>
110 
111                 </li>
112 
113                 <li><a href="#">栏目3->菜单2</a></li>
114 
115                 <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
116 
117                     <a href="#">栏目3->菜单3</a>
118 
119                     <ul>
120 
121                         <li><a href="#">菜单3->子菜单1</a></li>
122 
123                         <li><a href="#">菜单3->子菜单2</a></li>
124 
125                         <li><a href="#">菜单3->子菜单3</a></li>
126 
127                     </ul>
128 
129                 </li>
130 
131             </ul>
132 
133         </li>
134 
135     </ul>
136 </div>
137 </body>
138 
139 </html>

 

posted @ 2013-04-16 14:54  梦飞无颜  阅读(207)  评论(0)  编辑  收藏  举报