IE6到10，firefox，Chrome沒有問題,主要是CSS代碼，還有IE6、7JS的兼容問題，最后發現用setTimeout延時顯示二級菜單不行，二級菜單會自動隱藏，求高手解答~

HTML代碼：

<div id="menu"> <div id="top"><span><a href="#">全部商品分類</a></span></div> <ul id="nav"> <li><a href="#" class="navlia"><span>家用電器</span></a><div><ul><li><b><span><a href="#">大家電</a></span></b><span><a href="#">洗衣劑</a></span><span><a href="#">洗衣劑</a></span><span><a href="#">洗衣劑</a></span><span><a href="#">洗衣劑</a></span></li><li><b><span><a href="#">中家電</a></span></b><span><a href="#">空調</a></span><span><a href="#">洗衣劑</a></span></li><li><b><span><a href="#">小家電</a></span></b><span><a href="#">空調</a></span><span><a href="#">洗衣劑</a></span></li></ul><ul class="navulright"><li><b><span><a href="#">促銷活動</a></span></b><span class="closespan"></span></li><li><b><span><a href="#">推薦品牌</a></span></b></li></ul></div> </li> <li><a href="#" class="navlia"><span>手機數碼</span></a><div><ul><li><b><span><a href="#">大手機</a></span></b><span><a href="#">手機</a></span><span><a href="#">手機</a></span><span><a href="#">洗衣劑</a></span><span><a href="#">洗衣劑</a></span></li><li><b><span><a href="#">中手機</a></span></b><span><a href="#">手機數碼</a></span><span><a href="#">手機數碼</a></span></li><li><b><span><a href="#">小手機</a></span></b><span><a href="#">空調</a></span><span><a href="#">手機數碼</a></span></li></ul><ul class="navulright"><li><b><span><a href="#">促銷活動</a></span></b><span class="closespan"></span></li><li><b><span><a href="#">推薦品牌</a></span></b></li></ul></div> </li> <li><a href="#" class="navlia"><span>電腦辦公</span></a><div><ul><li><b><span><a href="#">大電腦</a></span></b><span><a href="#">電腦辦公</a></span><span><a href="#">洗衣劑</a></span><span><a href="#">洗衣劑</a></span><span><a href="#">洗衣劑</a></span></li><li><b><span><a href="#">中電腦</a></span></b><span><a href="#">空調</a></span><span><a href="#">電腦辦公</a></span></li><li><b><span><a href="#">小電腦</a></span></b><span><a href="#">空調</a></span><span><a href="#">洗衣劑</a></span></li></ul><ul class="navulright"><li><b><span><a href="#">促銷活動</a></span></b><span class="closespan"></span></li><li><b><span><a href="#">推薦品牌</a></span></b></li></ul></div> </li> <li><a href="#" class="navlia"><span>家居家裝</span></a><div><ul><li><b><span><a href="#">大家居</a></span></b><span><a href="#">家居家裝</a></span><span><a href="#">洗衣劑</a></span><span><a href="#">洗衣劑</a></span><span><a href="#">洗衣劑</a></span></li><li><b><span><a href="#">中家家居</a></span></b><span><a href="#">家居家裝</a></span><span><a href="#">洗衣劑</a></span></li><li><b><span><a href="#">小家家居</a></span></b><span><a href="#">空調</a></span><span><a href="#">家居家裝</a></span></li></ul><ul class="navulright"><li><b><span><a href="#">促銷活動</a></span></b><span class="closespan"></span></li><li><b><span><a href="#">推薦品牌</a></span></b></li></ul></div> </li> <li id="foot"><a href="#">全部商品分類</a></li> </ul> </div>

JS代碼：

var navli = document.getElementById("nav").children;//獲取一級菜單 var con = document.getElementById("nav").getElementsByTagName("div"); //獲取二級菜單 //var close=document.getElementsByClassName("closespan"); //IE9之前不支持這個 var timer;//延時顯示二級菜單，不會有滑動感。//關閉按鈕做的兼容 var id; document.getElementsByClassName = function (className, parentElement) {var children = (parentElement || document.body).getElementsByTagName('*');var elements = [], child;for (var i = 0; i < children.length; i++) {var child = children[i];var classNames = child.className.split(' ');for (var j = 0; j < classNames.length; j++) {if (classNames[j] == className) {elements.push(child); //符合條件的元素加入到數組中break;}}}return elements; }; var close = document.getElementById("nav"); var span=document.getElementsByClassName("closespan", close);//遍歷一級菜單數組 for (var i = 0; i < navli.length-1; i++) {navli[i].index = i;//賦值編號span[i].index = i;navli[i].onmouseover = function () { //鼠標一級菜單移入事件id = this.index;//加上這個延時顯示二級菜單就不行了，求解答。//timer=setTimeout("con[id].style.display = 'block';navli[id].className = 'navlihover';", 300) con[id].style.display = "block"; //顯示二級菜單navli[id].className = "navlihover"; //改變一級菜單邊框 }navli[i].onmouseout = function () { //移出事件clearTimeout(timer);//清除延時con[this.index].style.display = "none"; //隱藏二級菜單navli[this.index].className = ""; //改變一級菜單邊框樣式 }span[i].onclick = function () { //關閉按鈕con[this.index].style.display = "none"; //隱藏二級菜單 } }

CSS代碼：

#menu{position:relative;margin:10px 10px 10px 20px;width:200px; } #top {height:40px;padding-left:4px;background:url(../images/topleft.jpg) no-repeat; } #top span{ display:block; background-color:#DD0505; } #top a{font-size:12px;font-weight:bold;text-decoration:none;color:#FFF;padding-left:20px;line-height:40px; } #top a:hover{text-decoration:underline; } #nav{position:relative;list-style-type:none;margin:0px;padding:2px 0px;background-color:#FCF4EA;border:2px solid #D00000; } /* 一級菜單 */ #nav li{position:relative;margin:0px;padding:0px;width:180px; } .navlihover a{border-top:1px solid #CC3300;border-bottom:1px solid #CC3300;border-right:1px solid #FFF;border-left:0px;background-color:#FFF;z-index:11; } .navlia{position:relative;border-bottom:1px solid #FFF;border-top:1px solid #FCF4EA;font-size:14px;text-decoration:none;color:#333333;padding:6px 0px 2px 0px;display:block;width:150px;height:20px;z-index:11; } #nav li a:hover{color:#D60404;font-weight:bold;text-decoration:underline; } #nav li span{margin-left:20px; } #nav li p{margin:-26px 0 0 0;float:right; } /* 二級菜單 */ #nav li div {display: none;position:absolute;border:1px solid #CC3300;background-color:#FFF;left:150px; top:-30px; height:200px; width:700px; z-index:10; } #nav li ul{ float:left; margin:0px; padding:0px 0px 0px 5px; list-style-type:none; } #nav li ul a{border:0px;height:17px;width:33px; border-bottom:0px solid #CCC; } #nav li ul a:hover{ text-decoration:underline; } #nav li ul li{ padding:6px 0px; border:0px; width:500px; height:20px; border-bottom:1px dotted #EED6B7; } .navulright { float:left; margin-left:8px !important; width: 180px; height:200px; border-left:1px solid #FBE2C6; background-color:#FCF4EA; } .navulright li {width: 180px !important;height:85px !important;border-bottom:0px !important; } .closespan {display: inline-block !important;width:17px;height:17px;padding:0px !important;margin:0px 5px 0px 80px !important;border:0px !important;cursor:pointer;background-image:url("../images/close.png"); } #nav li ul li span { margin:0px; margin-right:20px; padding-left:5px; border-left:1px solid #CCC; } #nav li ul li span a {color:#333333;font-size:10px;text-decoration:none; } #nav li ul li span a:hover {color:#CC0000;font-size:10px;text-decoration:underline;font-weight:normal; } #nav li ul li b span {border:0px; } #nav li ul li b span a {color: #CC0000;font-size:12px; } #nav li ul li b span a:hover {color: #CC0000;font-size:12px;font-weight:bold; } #foot{position:relative;height:20px;background-color:#FDF1DE;z-index:-1; /*ie6 hack*/ } #foot a{font-size:10px;text-decoration:none;color:#CC0000;padding-left:18px;line-height:20px; } #foot a:hover{text-decoration:underline; }

點擊下載測試代碼

轉載于:https://www.cnblogs.com/lideyang/archive/2012/10/19/2731271.html

總結

以上是生活随笔為你收集整理的仿京东左侧二级导航条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。