延时消失的菜单

来源：互联网发布：电台手机录音软件编辑：程序博客网时间：2024/04/30 02:47

<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>

0 0