<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead 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 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 {display: none; position: absolute; top: 0px; left: 130px; margin-top: 0; margin-left: 1px; width: 120px ;} </style> </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]