这是简单的下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript下拉菜单</title> <style type="text/css"> * { padding: 0; margin: 0; } body { font-family: verdana, sans-serif; font-size: small; } #navigation, #navigation li ul { list-style-type: none; } #navigation { margin: 20px; } #navigation li { float: left; text-align: center; position: relative; } #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: #c5dbf2; padding-left: 10px; } #navigation li a:hover { color: #fff; background: #2687eb; } #navigation li ul li a:hover { color: #fff; background: #6b839c; } #navigation li ul { display: none; position: absolute; top: 40px; left: 0; margin-top: 1px; width: 120px; } #navigation li ul li ul { display: none; position: absolute; top: 0px; left: 130px; margin-top: 0; margin-left: 1px; width: 120px; } </style> <script type="text/javascript"> function displaySubMenu(li) { var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = "block"; } function hideSubMenu(li) { var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = "none"; } </script> </head> <body> <!-- style="display:inline-block;"--> <div style="border: 3px solid red;"> <ul id="navigation"> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">栏目1</a> <ul> <li><a href="#">栏目1->菜单1</a></li> <li><a href="#">栏目1->菜单2</a></li> <li><a href="#">栏目1->菜单3</a></li> <li><a href="#">栏目1->菜单4</a></li> </ul> </li> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">栏目2</a> <ul> <li><a href="#">栏目2->菜单1</a></li> <li><a href="#">栏目2->菜单2</a></li> <li><a href="#">栏目2->菜单3</a></li> <li><a href="#">栏目2->菜单4</a></li> <li><a href="#">栏目2->菜单5</a></li> </ul> </li> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">栏目3</a> <ul> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">栏目3->菜单1</a> <ul> <li><a href="#">菜单1->子菜单1</a></li> <li><a href="#">菜单1->子菜单2</a></li> <li><a href="#">菜单1->子菜单3</a></li> <li><a href="#">菜单1->子菜单4</a></li> </ul> </li> <li><a href="#">栏目3->菜单2</a></li> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"> <a href="#">栏目3->菜单3</a> <ul> <li><a href="#">菜单3->子菜单1</a></li> <li><a href="#">菜单3->子菜单2</a></li> <li><a href="#">菜单3->子菜单3</a></li> </ul> </li> </ul> </li> </ul> </div> </body> </html>