用JS实现下拉菜单效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<script type="text/javascript">
function displaymenu(li){
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="block";
}
function undisplaymenu(li){
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="none";
}
</script>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
#nevigation,#nevigation ul{
list-style:none;
}
#nevigation li{
float:left;
text-align: center;
position:relative;
}
#nevigation li a:link,#nevigation li a:visited{
display:block;
text-decoration:none;
color:#fff;
width:82px;
height:40px;
line-height:40px;
border:1px solid #fff;
background-color:#255f9e;
padding:10px;
}
#nevigation li a:hover{
color:#fff;
background-color:#ffb100;
}
#nevigation li ul{
display:none;
position:absolute;
/*top:40px;
margin-top:1px;
font-size:12px; */
}
</style>
</head>
<body>
<ul id="nevigation">
<li onmouseover="displaymenu(this)" onmouseout="undisplaymenu(this)">
<a href="#" target="_blank">菜单一</a>
<ul>
<li><a href="#" target="_blank">项目一</a></li>
<li><a href="#" target="_blank">项目二</a></li>
<li><a href="#" target="_blank">项目三</a></li>
<li><a href="#" target="_blank">项目四</a></li>
</ul>
</li>
<li onmouseover="displaymenu(this)" onmouseout="undisplaymenu(this)">
<a href="#" target="_blank">菜单二</a>
<ul>
<li><a href="#" target="_blank">项目一</a></li>
<li><a href="#" target="_blank">项目二</a></li>
<li><a href="#" target="_blank">项目三</a></li>
<li><a href="#" target="_blank">项目四</a></li>
</ul>
</li>
<li onmouseover="displaymenu(this)" onmouseout="undisplaymenu(this)">
<a href="#" target="_blank">菜单三</a>
<ul>
<li><a href="#" target="_blank">项目一</a></li>
<li><a href="#" target="_blank">项目二</a></li>
<li><a href="#" target="_blank">项目三</a></li>
<li><a href="#" target="_blank">项目四</a></li>
</ul>
</li>
<li onmouseover="displaymenu(this)" onmouseout="undisplaymenu(this)">
<a href="#" target="_blank">菜单四</a>
<ul>
<li><a href="#" target="_blank">项目一</a></li>
<li><a href="#" target="_blank">项目二</a></li>
<li><a href="#" target="_blank">项目三</a></li>
<li><a href="#" target="_blank">项目四</a></li>
</ul>
</li>
</ul>
</body>
</html>
代码演示效果：