<!DOCTYPE html>
<html>
<head>
<title>DaoHang_DownMenu</title>
<meta charset="utf-8">
<script type="text/javascript">
function showMeYourMenu(li){ /*Javascript写的操作函数*/
var a=li.getElementsByTagName("ul")[0];
a.style.display="block";
}
function hideYourMenu(li){
var a=li.getElementsByTagName("ul")[0];
a.style.display="none";
}
</script>
<style type="text/css">
*{margin: 0 auto; padding: 0px;}
#nav{width: 600px; height: 30px; background-color: #0066CC; padding: 0px; border-radius: 2px;}
#nav ul{ position: relative; margin: 0px; }
#nav ul li{float: left;}
#nav ul li a{ text-decoration: none; display: block; width:150px; height:30px; padding: 0px;margin:0px auto; text-align: center; line-height: 30px; color: #FFF; font-family: Microsoft Yahei;}
li{ list-style: none; }
#nav ul li a:hover{
background-color: #0099CC;
border-radius: 2px;
}
#nav ul li ul{display: none;position: absolute;background-color: #0066AA; border-radius: 2px;}
#nav ul li ul li{float: none;}
#nav ul li ul li a{background-color: #0077AA}
</style>
</head>
<body>
<div id="nav">
<ul >
<li><a href="#">首页</a></li>
<li οnmοuseοver="showMeYourMenu(this)" οnmοuseοut="hideYourMenu(this)"><a href="#">第一菜单栏</a> /*调用函数的位置需要注意*/
<ul>
<li><a href="#">11111</a></li>
<li><a href="#">22222</a></li>
</ul>
</li>
<li οnmοuseοver="showMeYourMenu(this)" οnmοuseοut="hideYourMenu(this)"><a href="#">第二菜单栏</a>
<ul>
<li>
<a href="#">33333</a>
<a href="#">44444</a>
</li>
</ul>
</li>
<li οnmοuseοver="showMeYourMenu(this)" οnmοuseοut="hideYourMenu(this)"><a href="#">第三菜单栏</a>
<ul>
<li>
<a href="#">55555</a>
<a href="#">66666</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
/*效果图都一样,注意与CSS实现的区别就行*/