仿京东左侧二级导航条

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