太简单了，不多说，但是自己还是写了一会，因为总会出现这样那样小的错误，毕境最近在复习和学习一些前台，欢迎看到的各位能给点改进意见或者其它的，Thank you!
首先是发图，只用CSS写了结构，几乎没加任何修饰，因为现在不是做那个的时候；
说明：如图一横向的菜单，当鼠标悬浮在上边时，下拉菜单出现，当鼠标不在上边时下拉菜单隐藏，仅此而已
环境：FireFox 23.0.1
aaarticlea/png;base64,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" alt="" />
原代码，都在一个页面中吧，只是为了学习而已
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
#menu ul{
padding:0;margin:0;
}
#menu li{
position:relative;
width:100px;
display:inline-block;
}
#menu li ul{
position:absolute;
top:100%;
left:0;
height:auto;
background-color:white;
}
</style> </head>
<body>
<a href="javascript:void(0)" onClick="menu()">Bind The Click</a>
<ul id="menu">
<li>
Home
<ul>
<li>Home</li>
<li>Product</li>
<li>Address</li>
<li>Contract</li>
<li>Help</li>
</ul>
</li>
<li>Product</li>
<li>Address</li>
<li>Contract</li>
<li>
Help
<ul>
<li class="home">Home</li>
<li>Product</li>
<li>Address</li>
<li>Contract</li>
<li>Help</li>
</ul>
</li>
</ul>
<script type="text/javascript">
function menu(){
var elem=document.getElementById("menu"); var ul=elem.getElementsByTagName("ul")
for(var i=0;i<ul.length;i++){
ul[i].style.display="none";
} //bind the action
var li=elem.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].onmouseover=function(){
var inli=this.getElementsByTagName("ul");
for(var j=0;j<inli.length;j++){
inli[j].style.display="block";
}
};
li[i].onmouseout=function(){
var inli=this.getElementsByTagName("ul");
for(var j=0;j<inli.length;j++){
inli[j].style.display="none";
}
}
} }
window.onload=menu();
</script>
</body>
</html>