Use the drop-down menu implemented by css + js. Use getElementsByTagName to obtain ul and hide the display.
<! 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 runat =" server "> <title> JavaScript drop-down menu </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: 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 {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 </pead> <body> <ul id = "navigation"> <li onmouseover = "displaySubMenu (this) "onmouseout =" hideSubMenu (this) "> column 1 <ul> <li> column 1-> menu 1 </li> <li> column 1-> menu 2 </li> <li> column 1-> menu 3 </li> <li> Topic 1-> menu 4 </li> </ul> </li> <li onmouseover = "displaySubMenu (this) "onmouseout =" hideSubMenu (this) "> Column 2 <ul> <li> Column 2-> menu 1 </li> <li> Column 2-> menu 2 </li> <li> Column 2-> menu 3 </li> <li> Column 2> menu 4 </li> <li> Column 2> menu 5 </li> </ul> </li> <li onmouseover = "displaySubMenu (this) "onmouseout =" hideSubMenu (this) "> Topic 3 <ul> <li onmouseover =" displaySubMenu (this) "onmouseout =" hideSubMenu (this) "> Topic 3-> menu 1 <ul> <li> menu 1-> sub menu 1 </li> <li> menu 1-> sub menu 2 </li> <li> menu 1-> sub menu 3 </li> <li> menu 1-> sub menu 4 </li> </ul> </li> <li> column 3 -> menu 2 </li> <li onmouseover = "displaySubMenu (this) "onmouseout =" hideSubMenu (this) "> Topic 3-> menu 3 <ul> <li> menu 3-> sub-menu 1 </li> <li> menu 3-> sub-Menu 2 </li> <li> menu 3-> sub menu 3 </li> </ul> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]