<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
font-family: "微软雅黑";
font-weight: normal;
}
li{
list-style: none;
}
#wrap a{
text-decoration: none;
text-align: center;
margin-left: 7px;
line-height: 28px
font-size:14px;
}
#wrap{
padding: 10px 12px 0 12px;
width: 520px;
height: 80px;
margin: 100px auto;
border: 1px solid #000000;
position: relative;
}
#nav{
width: 520px;
height: 36px;
background:url(img3/13.png) repeat-x;
border-radius: 4px;
overflow: hidden;
}
#nav li{
float: left;
padding: 6px 24px 6px 22px;
font-size: 14px;
color: #FFFFFF;
line-height: 24px;
height: 24px;
text-align: center;
}
#nav li:hover{
background: #638cb5;
}
#nav .nav_c{
float: right;
}
.nav_1,.nav_2,.nav_3,.nav_4{
display: none;
border-radius: 4px;
border: 1px solid #94b5d6;
width: 278px;
height: 28px;
position: absolute;
bottom: 9px;
}
.nav_1{
left: 16px;
}
.nav_2{
left: 46px;
}
.nav_3{
left: 100px;
}
.nav_4{
left: 150px;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="nav">
<li>首页</li>
<li>关于我们</li>
<li>作品</li>
<li>博客</li>
<li class="nav_c">更多</li>
</ul>
<div class="nav_1">
<a href="#">最近更新</a>
<a href="#">活动</a>
<a href="#">信息</a>
<a href="#">反馈</a>
</div>
<div class="nav_2">
<a href="#">最近更新</a>
<a href="#">活动</a>
<a href="#">信息</a>
<a href="#">反馈</a>
</div>
<div class="nav_3">
<a href="#">最近更新</a>
<a href="#">活动</a>
<a href="#">信息</a>
<a href="#">反馈</a>
</div>
<div class="nav_4">
<a href="#">最近更新</a>
<a href="#">活动</a>
<a href="#">信息</a>
<a href="#">反馈</a>
</div>
</div>
<script>
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else{
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(main);
function main(){
var wrap =document.getElementById("wrap");
var nav =document.getElementById("nav");
var aLi = nav.getElementsByTagName("li");
var aDiv = wrap.getElementsByTagName("div");
var timer = null;
var index = 0;
for (var i=0;i<aDiv.length;i++) {
fun(i)//调用多次函数
}
function fun(index){//控制函数
aLi[index].onmouseover = show;
aLi[index].onmouseout = hide;
aDiv[index].onmouseover = show;
aDiv[index].onmouseout = hide;
function show(){//鼠标移入函数
clearTimeout(timer);//首先清除定时器
for (var i=0;i<aDiv.length;i++) {//关闭所有的div
aDiv[i].style.display = "none";
}
aDiv[index].style.display = "block";//只显示当前的div
}
function hide (){//鼠标移出函数
timer = setTimeout(function(){//设置定时器，延时1秒
aDiv[index].style.display = "none";//关闭当前div
},1000)
}
}
}
</script>
</body>
</html>
posted on
