<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
*{margin:0;padding:0;list-style:none;}
#menu{position:relative; 960px;height:40px;margin:50px auto;}
#tab{height:40px;line-height:40px;background:red;border-radius:20px;}
#tab a{text-decoration:none;color:#fff;font-size:16px;font-family:'Microsoft Yahei';padding:3px 15px; margin-left:50px;}
#tab a:hover{color:red;background:yellow;border-radius:20px;}
.ulMenu{position:absolute;top:50px;450px;display:none;height:40px;line-height:40px;background:red;border-radius:20px;}
.ulMenu li{float:left;margin-left:50px;}
.menu1{left:0;}
.menu2{left:126px;}
.menu3{left:260px;}
.menu4{left:400px;}
</style>
<script>
window.onload = function()
{
var aA = document.getElementById('tab').getElementsByTagName('a');
var aUl = document.getElementById('menu').getElementsByTagName('ul');
var len = aA.length;
var timer = null;
var num = 0;
for(var i=0;i<len;i++)
{
aA[i].index = i;
aUl[i].index = i;
aUl[i].onmouseover = aA[i].onmouseover = function()
{
num = this.index;
show()
};
aUl[i].onmouseout = aA[i].onmouseout = function()
{
num = this.index;
hide();
};
};
function show()
{
clearTimeout( timer );
for(var i=0;i<len;i++)
{
aUl[i].style.display = 'none';
};
aUl[num].style.display = 'block';
};
function hide()
{
clearTimeout(timer);
timer = setTimeout(function(){
aUl[num].style.display = 'none';
},300);
};
};
</script>
<body>
<div id="menu">
<div id="tab">
<a href="#">菜单一</a>
<a href="#">菜单二</a>
<a href="#">菜单三</a>
<a href="#">菜单四</a>
</div>
<ul class="ulMenu menu1">
<li>菜单一</li>
<li>菜单一</li>
<li>菜单一</li>
<li>菜单一</li>
</ul>
<ul class="ulMenu menu2">
<li>菜单2</li>
<li>菜单一</li>
<li>菜单一</li>
<li>菜单一</li>
</ul>
<ul class="ulMenu menu3">
<li>菜单3</li>
<li>菜单一</li>
<li>菜单一</li>
<li>菜单一</li>
</ul>
<ul class="ulMenu menu4">
<li>菜单4</li>
<li>菜单一</li>
<li>菜单一</li>
<li>菜单一</li>
</ul>
</div>
</body>
</html>