简单实用的下拉级联菜单（原生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; 120px; height:40px;line-height:40px;border:1px solid #fff; border-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; 120px;} 22 #navigation li ul li ul {display:none;position:absolute;top:0px;left:130px;margin-top:0; margin-left:1px; 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="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>