利用css+js实现的下拉菜单通过getElementsByTagName获取ul隐藏显示
效果图
代码如下
<!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>
