延迟消失菜单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin:0px;
padding:0px;
list-style-type:none;
}
a{
text-decoration:none;
color:#FF3333;
padding:0 15px;
border-right:1px solid #fff;
}
ul{
overflow:hidden;
background:#FCC;
border-radius:10px;
display:none;
margin-top:10px;
}
#header{
width:860px;
margin:10px auto;
}
#nav{
background:#F33;
width:800px;
height:30px;
border-radius:20px;
padding:4px 10px 4px 50px;
color:#fff;
display:block;
}
#nav div,li{
float:left;
height:100%;
line-height:30px;
list-style:outside none none;
}
li:last-child a{
border-right:medium none;
}
#nav div a{
color:#fff;
display:block;
padding:0 30px;
border-right:medium none;
}
#nav .last{
float:right;
}
#home{
width: 350px;
position: relative;
left: 60px;
}
#about{
width: 350px;
position: relative;
left: 160px;
}
#work {
width: 285px;
position: relative;
left: 290px;
}
#blog{
width:290px;
position: relative;
left: 380px;
}
</style>
<script type="text/javascript">
window.onload = function ()
{
var timer = null;
function $(id,tag)
{
if(tag)
return document.getElementById(id).getElementsByTagName(tag);
else
return document.getElementById(id);
};
for( var i = 0; i < ($('header','ul').length); i++ )
{
$('nav','a')[i].index = i;
$('header','ul')[i].index = i;
//主
$('nav','a')[i].onmouseover = function ()
{
for ( var j = 0; j < $('header','ul').length; j++)
{
$('header','ul')[j].style.display = 'none';
}
$('header','ul')[this.index].style.display = 'block';
clearTimeout(timer);
};
$('nav','a')[i].onmouseout = function ()
{
var that = this.index;
timer = setTimeout( function ()
{
$('header','ul')[that].style.display = 'none';
},200);
};
$('header','ul')[i].onmouseover = function ()
{
this.style.display = 'block';
clearTimeout(timer);
};
$('header','ul')[i].onmouseout = function ()
{
var that = this;
timer = setTimeout( function ()
{
that.style.display = 'none';
},1500);
};
}
}
</script>
</head>
<body>
<div id="header">
<div id="nav">
<div>
<a href="javascript:">首页</a>
</div>
<div>
<a href="javascript:">关于我们</a>
</div>
<div>
<a href="javascript:">作品</a>
</div>
<div>
<a href="javascript:">博客</a>
</div>
<div class="last">
<a href="javascript:">>>更多</a>
</div>
</div>
<ul id="home">
<li><a href="#">活动</a></li>
<li><a href="#">最近活动</a></li>
<li><a href="#">最近活动</a></li>
<li><a href="#">最近活动</a></li>
</ul>
<ul id="about">
<li><a href="#">联系我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">我们</a></li>
</ul>
<ul id="work">
<li><a href="#">作品1</a></li>
<li><a href="#">作品1</a></li>
<li><a href="#">作品1</a></li>
<li><a href="#">作品1</a></li>
</ul>
<ul id="blog">
<li><a href="#">博客1</a></li>
<li><a href="#">博客1</a></li>
<li><a href="#">博客1</a></li>
<li><a href="#">博客1</a></li>
</ul>
</div>
</body>
</html>
