<! 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 pull-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 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.getelementsbytag Name ("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)" Onm Ouseout= "Hidesubmenu (This)" > column 1 <ul> <li> column 1-> menu 1</li> <li> column 1-> menu 2</li> & lt;li> column 1-> menu 3</li> <li> column 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-> menu4</li> <li> column 2-> menu 5</li> </ul> </li> <li onmouseover= "Displaysubmenu (This)" Onmouseout= "Hidesubmenu (This)" > section 3 <ul> <li onmouseover= "Displaysubmenu (This)" onmouseout= "Hidesubmenu (this) "> Column 3-> Menu 1 <ul> <li> menu 1-> submenu 1</li> <li> Menu 1-> submenu 2</li> <li> Menu 1-> submenu 3</li> <li> Menu 1-> submenu 4</li> </ul> </li> <li> column 3-> menu 2</li> <li onmouseover= "Displaysubmenu (This)" onmouseout= "Hidesubmenu (This)" > Column 3-> Menu 3 <ul> <li> Menu 3- > submenu 1</li> <li> Menu 3-> submenu 2</li> <li> Menu 3-> submenu 3</li> </ul> </li> </ul> </li> </ul> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
