用js实现下拉菜单

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030" />
<title>Untitled Document</title>
<style type="text/css">
#zh1{
margin:0px;
padding:0px;
}
#zh1 li{
float:left;
list-style:none;
width:100px;
height:30px;
background:#999;
position:relative;/*必须设置，为下面的position：absolute；做准备*/
display:inline;
}
#zh1 li a{
text-decoration:none;
line-height:30px;
color:#FFF;
text-align:center;
display:block;
}
#zh1 li a:hover{
background:#0F3;
}
#zh1 ul{
position:absolute;
top:30px;
left:-40px;
display:none;
width:100px;
height:100px;
}
#zh1 ul li{
    background:#F93;
    }
#zh1 ul li a:hover{
background:#0C9;
}
#zh1 ul ul{
    position:absolute;
    top:0px;
    left:60px;
    display:none;
    }
</style>
<script type="text/javascript">
function hide(li){
    var hide = li.getElementsByTagName("ul")[0];//下拉菜单的实现
    hide.style.display = "block";
    }
function fei(li){
    var fei = li.getElementsByTagName("ul")[0];
    fei.style.display = "none";
    }

</script>
</head>

<body>
<ul id="zh1">
<li><a href="#">菜单一</a></li>
<li onmouseover="hide(this);" onmouseout="fei(this);"><a href="#">菜单二</a>
<ul>
<li><a href="#">子菜单一</a></li>
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单三</a></li>
</ul>
</li>
<li onmouseover="hide(this);" onmouseout="fei(this);"><a href="#">菜单三</a>
<ul>
<li><a href="#">子菜单一</a></li>
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单三</a>
</li>
</ul>
</li>
<li onmouseover="hide(this);" onmouseout="fei(this);"><a href="#">菜单四</a>
<ul>
<li><a href="#">子菜单一</a></li>
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单三</a></li>
</ul>
</li>
<li onmouseover="hide(this);" onmouseout="fei(this);"><a href="#">菜单五</a>
<ul>
<li><a href="#">子菜单一</a></li>
<li><a href="#">子菜单二</a></li>
<li onmouseover="hide(this);" onmouseout="fei(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>

posted @ 2013-07-05 14:27  心忘记zyf  阅读(246)  评论(0)    收藏  举报