<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* { margin:0; padding:0; }
ul { list-style:none; }
#nav { width:500px; height:35px; margin:0 auto; font-size:13px; }
#nav li { float:left; width:120px; height:35px; line-height:35px; background:#000; text-align:center; }
#nav li a { color:#fff; text-decoration:none; display:block; }
#nav li a:hover { background:#444; }
#nav li ul { display:none; }
#nav li.navHover a { background:#444; }
#nav li.navHover ul { display:block; }
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">网站首页</a></li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司文化</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</li>
<li><a href="#">产品展示</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品二</a></li>
<li><a href="#">产品三</a></li>
</ul>
</li>
</ul>
<script>
function navigation()
{
var nav = document.getElementById("nav");
var li = nav.getElementsByTagName("li");
for(var i=0; i<li.length; i++)
{
li[i].onmouseover = function() { this.className = "navHover"; }
li[i].onmouseout = function() { this.className = ""; }
}
}
window.onload = function()
{
navigation();
}
</script>
</body>
</html>
