延时消失的菜单

<script>
window.onload=function () {
var oUl=document.getElementsByTagName("ul")[0];
var oLi=document.getElementsByTagName("li");
var timer=null;
var old=0;

function on() {
timer=setInterval(function () {
(old==oLi.length-1) ? (old=0) : (old++);
b(old);
},1000);
}
function b(old) {
for(var i=0 ;i<oLi.length;i++){
oLi[i].className='';
oLi[i].getElementsByTagName("div")[0].className='';
}
oLi[old].className='active';
oLi[old].getElementsByTagName("div")[0].className='on';
}
on();
oUl.onmouseover=function () {
clearInterval(timer);
};
oUl.onmouseout=on;

}
</script>

<div class="bg">
<ul class="clearfix">
<li  class="active" >
<a href="javascript:">首页</a>
<div class="on" >
<a href="javascript:">首页</a>
</div>
</li>
<li>
<a href="javascript:">关于我们</a>
<div>
<a href="javascript:">关于我们</a>
</div>
</li>
<li>
<a href="javascript:">作品</a>
<div>
<a href="javascript:">作品</a>
</div>
</li>
<li>
<a href="javascript:">博客</a>
<div>
<a href="javascript:">博客</a>
</div>
</li>
</ul>
</div>

<style>
.clearfix:after { content: "."; display: block; clear: both; height: 0; overflow: hidden; visibility: hidden; }
.clearfix{zoom: 1;}
*{padding: 0; margin: 0;}
a{text-decoration: none;color: #fff;}
.bg{
width: 500px;
margin: 100px auto;
}
ul{
width: 500px;
list-style: none;
background: linear-gradient(top,#739cbd,#215a9c);
background: -webkit-linear-gradient(top,#739cbd,#215a9c);
background: -moz-linear-gradient(top,#739cbd,#215a9c);
}
ul li{
position: relative;
float: left;
padding: 5px 5px;
border-right: 1px solid #fff;
text-align: center;
}
ul li>a{
display: inline-block;
padding: 5px 10px;
}
.active>a{
background:#84a5c6 ;
border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
}
li>div{
position: absolute;
top: 40px;
left: 0;
background: #fff;
border: 1px solid #e6e6e6;
display: none;
}
li>div>a{
color: blue;
font-size: 12px;
padding: 5px 10px;
}
.on{
display: block;
}
</style>