菜单

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>

*{margin:0;padding:0;list-style:none;}
#menu{position:relative; width: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;width: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>

posted @ 2018-03-06 14:26  璁璁那~年  阅读(130)  评论(0)    收藏  举报