html如下：
???<div class="box"> ???????<ul class="clear-fix"> ???????????<li class="outer"> ???????????????<a href="#" class="nav">index</a> ???????????????<ul ?class="inter-box clear-fix"> ???????????????????<li><a href="#">inter1</a></li> ???????????????????<li><a href="#">inter1</a></li> ???????????????????<li><a href="#">inter1</a></li> ???????????????????<li><a href="#">inter1</a></li> ???????????????</ul> ???????????</li> ???????????<li class="outer"> ???????????????<a href="#" class="nav">index1</a> ???????????????<ul ?class="inter-box clear-fix"> ???????????????????<li><a href="#">inter1</a></li> ???????????????????<li><a href="#">inter1</a></li> ???????????????????<li><a href="#">inter1</a></li> ???????????????????<li><a href="#">inter1</a></li> ???????????????</ul> ???????????</li> ???????????<li class="outer"> ???????????????<a href="#" class="nav">index2</a> ???????????????<ul ?class="inter-box clear-fix"> ???????????????????<li><a href="#">inter1</a></li> ???????????????????<li><a href="#">inter1</a></li> ???????????????????<li><a href="#">inter1</a></li> ???????????????????<li><a href="#">inter1</a></li> ???????????????</ul> ???????????</li> ???????????<li class="outer"> ???????????????<a href="#" class="nav">index3</a> ???????????????<ul ?class="inter-box clear-fix"> ???????????????????<li><a href="#">inter1</a></li> ???????????????????<li><a href="#">inter1</a></li> ???????????????????<li><a href="#">inter1</a></li> ???????????????????<li><a href="#">inter1</a></li> ???????????????</ul> ???????????</li> ???????</ul> ???</div>
css如下：
???body{ ???????position: relative; ???????z-index: 1; ???} ???ul,li{list-style: none;} ???*{padding: 0;margin: 0;} ???????.clear-fix:after{ ???????????content: "."; ???????????clear: both; ???????????display: block; ???????????font-size: 0; ???????????height: 0; ???????????visibility: hidden; ???????} ???????.box{ ???????????position: absolute; ???????????top: 0; ???????????left: 0; ???????????width: 100%; ???????????height: 60px; ???????????z-index: 100; ???????????text-align: center; ???????????background: #ccc; ???????} ???????.outer{ ???????????float: left; ???????????line-height: 60px; ???????????padding: 0 15px; ???????????position: relative; ???????????/*z-index: -5;*/ ???????} ???????.inter-box{ ???????????position: absolute; ???????????width: 100%; ???????????top: 60px; ???????????left: 0; ???????????/*display: none;*/ ???????????height: 0px; ???????????overflow: hidden; ???????????-webkit-transition: ????opacity linear 0.2s 1s; ???????????-o-transition: ????opacity linear 0.2s 1s; ???????????transition: ????opacity linear 0.2s 1s; ???????} ???????.nav{ ???????????display: block; ???????????width: 100%; ???????????height: 100%; ???????} ???????.inter-box li{ ???????????background: #dfdfdf; ???????????line-height: 30px; ???????}js如下，需引入jquery：
???????var timer=initTimer(); ???????$(".nav").each(function(i,ele){ ???????????$(ele).attr("index",i); ???????????$(ele).mouseenter(function(){ ???????????????var _this=$(this).attr("index") ???????????????show(_this); ???????????}) ???????????$(ele).mouseleave(function(){ ???????????????var _this=$(this).attr("index"); ???????????????hide(_this); ???????????}) ???????}) ???????$(".inter-box").each(function(i,ele){ ???????????$(ele).attr("index",i); ???????????$(ele).mouseenter(function(){ ???????????????console.log(111) ???????????????var _this=$(this).attr("index") ???????????????show(_this); ???????????}) ???????????$(ele).mouseleave(function(){ ???????????????var _this=$(this).attr("index"); ???????????????hide(_this); ???????????}) ???????}) ???????function initTimer(){ ???????????var timer={}; ???????????$(".nav").each(function(i,ele){ ???????????????timer[i]=null; ???????????}); ???????????return timer; ???????} ???????function show(nowIndex){ ???????????clearTimeout(timer[nowIndex]); ???????????????$(".inter-box").eq(nowIndex).animate({"height":"300px"}); ???????} ???????function hide(nowIndex){ ???????????timer[nowIndex]=setTimeout(function(){ ???????????????$(".inter-box").eq(nowIndex).animate({"height":"0px"}); ???????????},200) ???????}基于jquery的延时导航菜单，可做延时触发器！
原文地址：http://www.cnblogs.com/pomelott/p/7470993.html