标签：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>延时菜单</title> 6 7 <style> 8 ul,li{ list-style: none;} 9 a{ text-decoration: none;} 10 #nav{width:1000px; height:50px; background: #f90;} 11 #sup-nav{ overflow:hidden;} 12 #sup-nav li{ float:left; } 13 #sup-nav li a { color:#fff; font-size:18px; height:50px; line-height:50px; display:inline-block; margin:0 20px;} 14 #sup-nav li a:hover{ text-decoration:underline;} 15 16 #sub-nav{} 17 #sub-nav ul{ overflow: hidden; display: none; background:#F30;} 18 #sub-nav ul li{ float:left;} 19 #sub-nav ul li a{ font-size:14px; color:#000; padding:0 10px; height:30px; line-height:30px; display:inline-block; } 20 #sub-nav ul li a:hover{ text-decoration: underline;} 21 22 </style> 23 24 25 <script> 26 27 window.onload = function(){ 28 var supNavLink = document.getElementById(‘sup-nav‘).getElementsByTagName(‘a‘); 29 var subNavItem = document.getElementById(‘sub-nav‘).getElementsByTagName(‘ul‘); 30 var supNavLink; 31 var timer; 32 var currItem; 33 34 for(var i=0;i<supNavLink.length;i++){ 35 supNavLink[i].index = i; 36 subNavLink = subNavItem[i].getElementsByTagName(‘a‘); 37 38 supNavLink[i].onmouseover = function(){ 39 if(currItem && (currItem === subNavItem[this.index])){ 40 clearTimeout(timer); 41 } 42 subNavItem[this.index].style.display = ‘block‘; 43 44 } 45 supNavLink[i].onmouseout = function(){ 46 var that = this; 47 timer = setTimeout(function(){ 48 subNavItem[that.index].style.display = ‘none‘; 49 },50); 50 currItem = null; 51 } 52 53 for(var j=0;j<subNavLink.length;j++){ 54 subNavLink[j].onmouseover = function(){ 55 clearTimeout(timer); 56 } 57 } 58 59 subNavItem[i].onmouseover = function(){ 60 clearTimeout(timer); 61 } 62 63 subNavItem[i].onmouseout = function(){ 64 var that = this; 65 timer = setTimeout(function(){ 66 that.style.display = ‘none‘; 67 },50); 68 currItem = this; 69 } 70 } 71 72 } 73 74 </script> 75 76 </head> 77 78 <body> 79 <div id="nav"> 80 <ul id="sup-nav"> 81 <li> 82 <a href="javascript:;" class="pLink">我的地盘</a> 83 84 </li> 85 <li> 86 <a href="javascript:;" class="pLink">产品</a> 87 88 </li> 89 <li> 90 <a href="javascript:;" class="pLink">文档</a> 91 </li> 92 <li> 93 <a href="javascript:;" class="pLink">任务视图</a> 94 95 </li> 96 <li> 97 <a href="javascript:;" class="pLink">绩效视图</a> 98 99 </li> 100 101 102 </ul> 103 <div id="sub-nav"> 104 <ul> 105 <li><a href="javascript:;">待办</a></li> 106 <li><a href="javascript:;">任务</a></li> 107 <li><a href="javascript:;">需求</a></li> 108 <li><a href="javascript:;">bug</a></li> 109 </ul> 110 <ul> 111 <li><a href="javascript:;">需求</a></li> 112 <li><a href="javascript:;">动态</a></li> 113 <li><a href="javascript:;">计划</a></li> 114 <li><a href="javascript:;">线路图</a></li> 115 <li><a href="javascript:;">文档</a></li> 116 <li><a href="javascript:;">项目</a></li> 117 <li><a href="javascript:;">维护</a></li> 118 </ul> 119 <ul> 120 <li><a href="javascript:;">编辑</a></li> 121 <li><a href="javascript:;">分类</a></li> 122 </ul> 123 <ul> 124 <li><a href="javascript:;">部门任务</a></li> 125 <li><a href="javascript:;">产品任务</a></li> 126 <li><a href="javascript:;">项目任务</a></li> 127 </ul> 128 <ul> 129 <li><a href="javascript:;">产品报告</a></li> 130 <li><a href="javascript:;">质量报告</a></li> 131 <li><a href="javascript:;">任务工作量</a></li> 132 <li><a href="javascript:;">bug导出</a></li> 133 <li><a href="javascript:;">待办排行</a></li> 134 </ul> 135 136 </div> 137 138 </div> 139 140 141 </body> 142 </html>
标签：
原文地址：http://www.cnblogs.com/huyang0528/p/4711222.html
