a drop-down menu implemented using CSS+JS. Get ul through getElementsByTagName, hide display.
Effect Chart:
The code is as follows:
<! 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 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.getelementsbytagname ("ul") [0];
subMenu.style.display = "block";
}
function Hidesubmenu (li) {
var submenu = li.getelementsbytagname ("ul") [0];
SubMenu.style.display = "None";
}
</script>
</head>
<body>
<ul id= "navigation" >
<li onmouseover= "Displaysubmenu (This)" onmouseout= "Hidesubmenu (This)" >
<a href= "#" > Column 1</a>
<ul>
<li><a href= "#" > Column 1-> menu 1</a></li>
<li><a href= "#" > Column 1-> menu 2</a></li>
<li><a href= "#" > Column 1-> menu 3</a></li>
<li><a href= "#" > Column 1-> menu 4</a></li>
</ul>
</li>
<li onmouseover= "Displaysubmenu (This)" onmouseout= "Hidesubmenu (This)" >
<a href= "#" > Column 2</a>
<ul>
<li><a href= "#" > Column 2-> menu 1</a></li>
<li><a href= "#" > Column 2-> menu 2</a></li>
<li><a href= "#" > Column 2-> menu 3</a></li>
<li><a href= "#" > Column 2-> menu 4</a></li>
<li><a href= "#" > Column 2-> menu 5</a></li>
</ul>
</li>
<li onmouseover= "Displaysubmenu (This)" onmouseout= "Hidesubmenu (This)" >
<a href= "#" > Column 3</a>
<ul>
<li onmouseover= "Displaysubmenu (This)" onmouseout= "Hidesubmenu (This)" >
<a href= "#" > Column 3-> menu 1</a>
<ul>
<li><a href= "#" > Menu 1-> submenu 1</a></li>
<li><a href= "#" > Menu 1-> submenu 2</a></li>
<li><a href= "#" > Menu 1-> submenu 3</a></li>
<li><a href= "#" > Menu 1-> submenu 4</a></li>
</ul>
</li>
<li><a href= "#" > Column 3-> menu 2</a></li>
<li onmouseover= "Displaysubmenu (This)" onmouseout= "Hidesubmenu (This)" >
<a href= "#" > Column 3-> menu 3</a>
<ul>
<li><a href= "#" > Menu 3-> submenu 1</a></li>
<li><a href= "#" > Menu 3-> submenu 2</a></li>
<li><a href= "#" > Menu 3-> submenu 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>