JavaScript下拉菜單實現代碼

　　利用css+js實現的下拉菜單通過getElementsByTagName獲取ul隱藏顯示

　　效果圖

　　 JavaScript下拉菜單實現代碼

　　代碼如下

　　<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head runat="server">
<title>JavaScript下拉菜單</title>
<style type="text/css">
* {
padding:;
margin:;
}
body {
fontfamily:verdana sansserif;
fontsize:small;
}
#navigation #navigation li ul {
liststyletype:none;
}
#navigation {
margin:px;
}
#navigation li {
float:left;
textalign:center;
position:relative;
}
#navigation li a:link #navigation li a:visited {
display:block;
textdecoration:none;
color:#;
width:px;
height:px;
lineheight:px;
border:px solid #fff;
borderwidth:px px ;
background:#cdbf;
paddingleft:px;
}
#navigation li a:hover {
color:#fff;
background:#eb;
}
#navigation li ul li a:hover {
color:#fff;
background:#bc;
}
#navigation li ul {
display:none;
position:absolute;
top:px;
left:;
margintop:px;
width:px;
}
#navigation li ul li ul {
display:none;
position:absolute;
top:px;
left:px;
margintop:;
marginleft:px;
width:px;
}
</style>
<script type="text/javascript">
function displaySubMenu(li) {
var subMenu = ligetElementsByTagName("ul")[];
subMenustyledisplay = "block";
}
function hideSubMenu(li) {
var subMenu = ligetElementsByTagName("ul")[];
subMenustyledisplay = "none";
}
</script>
</head>
<body>
<ul id="navigation">
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">欄目</a>
<ul>
<li><a href="#">欄目>菜單</a></li>
<li><a href="#">欄目>菜單</a></li>
<li><a href="#">欄目>菜單</a></li>
<li><a href="#">欄目>菜單</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">欄目</a>
<ul>
<li><a href="#">欄目>菜單</a></li>
<li><a href="#">欄目>菜單</a></li>
<li><a href="#">欄目>菜單</a></li>
<li><a href="#">欄目>菜單</a></li>
<li><a href="#">欄目>菜單</a></li>
</ul>
</li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">欄目</a>
<ul>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">欄目>菜單</a>
<ul>
<li><a href="#">菜單>子菜單</a></li>
<li><a href="#">菜單>子菜單</a></li>
<li><a href="#">菜單>子菜單</a></li>
<li><a href="#">菜單>子菜單</a></li>
</ul>
</li>
<li><a href="#">欄目>菜單</a></li>
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="#">欄目>菜單</a>
<ul>
<li><a href="#">菜單>子菜單</a></li>
<li><a href="#">菜單>子菜單</a></li>
<li><a href="#">菜單>子菜單</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20575.html