可以设置一个一直都显示的二级菜单，修复了没有二级菜单时鼠标移上去仍然显示上一个二级菜单的问题.支持一级菜单鼠标离开事件
html代码
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=gb2312" /> 5 <title>我的网站</title> 6 <meta name="description" content="" /> 7 <meta name="keywords" content="" /> 8 <link type="text/css" rel="stylesheet" href="http://www.188163.com/img/fnews/css/style.css" /> 9 </head> 10 <body> 11 <div class="w1000"> 12 <div class="w960"> 13 <!--f1--> 14 <!-- 菜单 --> 15 <div id="menu" class="menus"> 16 <ul> 17 <!-- class='navselect'根据此属性来判断需要默认显示的二级菜单，以便在织梦模板中通用 --> 18 <li class='navselect'><a href="/" rel='dropmenu1'>主 页</a></li> 19 <li><a href='/a/jinrongzixun/'>金融资讯</a></li> 20 <li><a href='/a/gerenjinrong/' rel='dropmenu2'>个人金融</a></li> 21 <li><a href='/a/qiyejinrong/' rel='dropmenu4'>企业金融</a></li> 22 <li><a href='/a/caijingpindao/' rel='dropmenu5'>财经频道</a></li> 23 <li><a href='/a/zhifujiesuan/' rel='dropmenu6'>支付结算</a></li> 24 <li><a href='/a/yewushenqingtongdao/' rel='dropmenu7'>业务申请</a></li> 25 <li><a href='/a/zhongyaogonggao/' >重要公告</a></li> 26 <li><a href='/a/xinyongka/' >信用卡</a></li> 27 </ul> 28 </div> 29 <div class="menus_bottom"> 30 </div> 31 <!-- //二级子类下拉菜单 --> 32 <script type="text/javascript" src="dropdown.js"></script> 33 <ul id="dropmenu1" class="dropMenu"> 34 <li><a href="/a/gerenjinrong/touzilicai/">首页列表</a> | </li> 35 </ul> 36 <ul id="dropmenu2" class="dropMenu"> 37 <li><a href="/a/gerenjinrong/touzilicai/">投资理财</a> | </li> 38 <li><a href="/a/gerenjinrong/grdk/">个人贷款</a> | </li> 39 <li><a href="/a/gerenjinrong/gerenxiaofei/">个人消费贷款</a> | </li> 40 <li><a href="/a/gerenjinrong/xinyong/">信用贷款</a> | </li> 41 <li><a href="/a/gerenjinrong/qichedaikuan/">汽车贷款</a> | </li> 42 <li><a href="/a/gerenjinrong/yishoulou/">一手楼按揭</a> | </li> 43 <li><a href="/a/gerenjinrong/ershoulou/">二手楼按揭</a> | </li> 44 <li><a href="/a/gerenjinrong/grjy/">个人经营贷款</a> | </li> 45 </ul> 46 <ul id="dropmenu4" class="dropMenu"> 47 <li><a href="/a/qiyejinrong/gongsirongzi/">公司融资</a> | </li> 48 <li><a href="/a/qiyejinrong/maoyirongzi/">贸易融资</a> | </li> 49 <li><a href="/a/qiyejinrong/gongsilicai/">公司理财</a> | </li> 50 <li><a href="/a/qiyejinrong/piaojuyewu/">票据业务</a> | </li> 51 <li><a href="/a/qiyejinrong/xiangmurongzi/">项目融资</a> | </li> 52 </ul> 53 <ul id="dropmenu5" class="dropMenu"> 54 <li><a href="/a/caijingpindao/huangjin/">黄金</a> | </li> 55 <li><a href="/a/caijingpindao/zhaiquan/">债券</a> | </li> 56 <li><a href="/a/caijingpindao/waihui/">外汇</a> | </li> 57 <li><a href="/a/caijingpindao/jijin/">基金</a> | </li> 58 </ul> 59 <ul id="dropmenu6" class="dropMenu"> 60 <li><a href="/a/zhifujiesuan/pos/">P0S支付</a> | </li> 61 </ul> 62 <ul id="dropmenu7" class="dropMenu"> 63 <li><a href="/a/yewushenqingtongdao/gerenyewu/">个人业务咨询</a> | </li> 64 <li><a href="/a/yewushenqingtongdao/gongsiyewu/">公司业务咨询</a> | </li> 65 </ul> 66 <ul id="dropmenu8" class="dropMenu"> 67 </ul> 68 <ul id="dropmenu3" class="dropMenu"> 69 </ul> 70 <script type="text/javascript"> cssdropdown.startchrome("menu")</script> 71 </div> 72 73 </div> 74 <!--1000 end --> 75 </body> 76 </html>
dropdown.js
1 var cssdropdown = { 2 disappeardelay: 250, 3 disablemenuclick: false, 4 enableswipe: 1, 5 enableiframeshim: 1, 6 dropmenuobj: null, 7 ie: document.all, 8 firefox: document.getElementById && !document.all, 9 swipetimer: undefined, 10 bottomclip: 0, 11 12 getposOffset: function(what, offsettype) { 13 var totaloffset = (offsettype == "left") ? what.offsetLeft: what.offsetTop; 14 var parentEl = what.offsetParent; 15 while (parentEl != null) { 16 totaloffset = (offsettype == "left") ? totaloffset + parentEl.offsetLeft: totaloffset + parentEl.offsetTop; 17 parentEl = parentEl.offsetParent; 18 } 19 return totaloffset; 20 }, 21 22 swipeeffect: function() { 23 if (this.bottomclip < parseInt(this.dropmenuobj.offsetHeight)) { 24 this.bottomclip += 10 + (this.bottomclip / 10); 25 this.dropmenuobj.style.clip = "rect(0 auto " + this.bottomclip + "px 0)"; 26 } else return; 27 this.swipetimer = setTimeout("cssdropdown.swipeeffect()", 10); 28 }, 29 //隐藏或者显示二级菜单 30 showhide: function(obj, e) { 31 if (this.ie || this.firefox) this.dropmenuobj.style.left = this.dropmenuobj.style.top = "-500px"; 32 if (e.type == "click" && obj.visibility == hidden || e.type == "mouseover") { 33 if (this.enableswipe == 1) { 34 if (typeof this.swipetimer != "undefined") clearTimeout(this.swipetimer); 35 obj.clip = "rect(0 auto 0 0)"; 36 this.bottomclip = 0; 37 this.swipeeffect(); 38 } 39 obj.visibility = "visible"; 40 } else if (e.type == "click") obj.visibility = "hidden"; 41 }, 42 43 iecompattest: function() { 44 return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement: document.body; 45 }, 46 47 clearbrowseredge: function(obj, whichedge) { 48 var edgeoffset = 0; 49 if (whichedge == "rightedge") { 50 var windowedge = this.ie && !window.opera ? this.iecompattest().scrollLeft + this.iecompattest().clientWidth - 15 : window.pageXOffset + window.innerWidth - 15; 51 this.dropmenuobj.contentmeasure = this.dropmenuobj.offsetWidth; 52 if (windowedge - this.dropmenuobj.x < this.dropmenuobj.contentmeasure) edgeoffset = this.dropmenuobj.contentmeasure - obj.offsetWidth; 53 } else { 54 var topedge = this.ie && !window.opera ? this.iecompattest().scrollTop: window.pageYOffset; 55 var windowedge = this.ie && !window.opera ? this.iecompattest().scrollTop + this.iecompattest().clientHeight - 15 : window.pageYOffset + window.innerHeight - 18; 56 this.dropmenuobj.contentmeasure = this.dropmenuobj.offsetHeight; 57 if (windowedge - this.dropmenuobj.y < this.dropmenuobj.contentmeasure) { 58 edgeoffset = this.dropmenuobj.contentmeasure + obj.offsetHeight; 59 if ((this.dropmenuobj.y - topedge) < this.dropmenuobj.contentmeasure) edgeoffset = this.dropmenuobj.y + obj.offsetHeight - topedge; 60 } 61 } 62 return edgeoffset; 63 }, 64 //鼠标移动到一级菜单上执行 65 dropit: function(obj, e, dropmenuID) { 66 //隐藏上次显示的二级菜单 67 if (this.dropmenuobj != null) this.dropmenuobj.style.visibility = "hidden"; 68 this.clearhidemenu(); 69 if (this.ie || this.firefox) { 70 var me = this; 71 //一级菜单鼠标离开事件 72 obj.onmouseout = function() { 73 cssdropdown.delayhidemenu(); 74 }; 75 //一级菜单鼠标点击事件 76 obj.onclick = function() { 77 return ! cssdropdown.disablemenuclick 78 }; 79 if (!dropmenuID) { 80 return; 81 } 82 this.dropmenuobj = document.getElementById(dropmenuID); 83 if (!this.dropmenuobj) return; 84 //为二级菜单绑定鼠标移动到事件 85 this.dropmenuobj.onmouseover = function() { 86 //移除从一级菜单离开时触发的方法，防止误执行 87 cssdropdown.clearhidemenu(); 88 } 89 //为二级菜单绑定鼠标离开事件 90 this.dropmenuobj.onmouseout = function(e) { 91 cssdropdown.dynamichide(e); 92 } 93 //为二级菜单绑定鼠标点击事件 94 this.dropmenuobj.onclick = function() { 95 cssdropdown.delayhidemenu(); 96 } 97 this.showhide(this.dropmenuobj.style, e); 98 //调整二级菜单位置，以免位置错乱 99 this.dropmenuobj.x = this.getposOffset(obj, "left"); 100 this.dropmenuobj.y = this.getposOffset(obj, "top"); 101 this.dropmenuobj.style.left = this.dropmenuobj.x - this.clearbrowseredge(obj, "rightedge") + "px"; 102 this.dropmenuobj.style.top = this.dropmenuobj.y - this.clearbrowseredge(obj, "bottomedge") + obj.offsetHeight + 1 + "px"; 103 this.positionshim(); 104 } 105 }, 106 107 positionshim: function() { 108 if (this.enableiframeshim && typeof this.shimobject != "undefined") { 109 if (this.dropmenuobj.style.visibility == "visible") { 110 this.shimobject.style.width = this.dropmenuobj.offsetWidth + "px"; 111 this.shimobject.style.height = this.dropmenuobj.offsetHeight + "px"; 112 this.shimobject.style.left = this.dropmenuobj.style.left; 113 this.shimobject.style.top = this.dropmenuobj.style.top; 114 } 115 this.shimobject.style.display = (this.dropmenuobj.style.visibility == "visible") ? "block": "none"; 116 } 117 }, 118 119 hideshim: function() { 120 if (this.enableiframeshim && typeof this.shimobject != "undefined") this.shimobject.style.display = 'none'; 121 }, 122 123 contains_firefox: function(a, b) { 124 while (b.parentNode) if ((b = b.parentNode) == a) return true; 125 return false; 126 }, 127 //隐藏二级菜单，兼容性处理 128 dynamichide: function(e) { 129 var evtobj = window.event ? window.event: e; 130 //确认是鼠标离开事件，避免误触发 131 if (this.ie && !this.dropmenuobj.contains(evtobj.toElement)) this.delayhidemenu(); 132 else if (this.firefox && e.currentTarget != evtobj.relatedTarget && !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget)) this.delayhidemenu(); 133 }, 134 //鼠标点击菜单，或者离开菜单时执行 135 delayhidemenu: function() { 136 this.delayhide = setTimeout(function() { 137 cssdropdown.dropmenuobj.style.visibility = 'hidden'; 138 cssdropdown.hideshim(); 139 cssdropdown.showAlways(); 140 }, 141 this.disappeardelay); 142 }, 143 //移除定时方法 144 clearhidemenu: function() { 145 if (this.delayhide != "undefined") clearTimeout(this.delayhide); 146 }, 147 //显示默认被选中的一级菜单 148 showAlways: function() { 149 if (this.always) { 150 this.always.onmouseover({ 151 type: "mouseover" 152 }); 153 } 154 }, 155 //初始化 156 startchrome: function() { 157 for (var ids = 0; ids < arguments.length; ids++) { 158 var menuitems = document.getElementById(arguments[ids]).getElementsByTagName("a"); 159 for (var i = 0; i < menuitems.length; i++) { 160 var relvalue = menuitems[i].getAttribute("rel"); 161 //绑定鼠标移动到事件 162 menuitems[i].onmouseover = function(e) { 163 var event = typeof e != "undefined" ? e: window.event; 164 cssdropdown.dropit(this, event, this.getAttribute("rel")); 165 }; 166 //显示默认被选中的一级菜单 167 if (!this.always && menuitems[i].parentNode.getAttribute("class") == "navselect") { 168 this.always = menuitems[i]; 169 this.showAlways(); 170 } 171 } 172 } 173 if (window.createPopup && !window.XmlHttpRequest) { 174 document.write('<IFRAME id="iframeshim" src="" style="display: none; left: 0; top: 0; z-index: 90; position: absolute; filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)" frameBorder="0" scrolling="no"></IFRAME>'); 175 this.shimobject = document.getElementById("iframeshim"); 176 } 177 } 178 179 }
演示地址：http://www.188163.com（我不知道啥时候失效...）