Question

我从JavaScript Kit获得了此代码并且它无法正常工作......他们的网站不是很活跃，所以我在这里发布了。列表显示正确，但是，如果我将鼠标悬停在菜单（主菜单，子菜单等）上然后将其悬停，整个菜单将消失。当您将鼠标悬停在主菜单上时，它会重新出现。子菜单的其余部分显示正确。有什么想法吗？

JS：

    var cssmenuids=["navigation"] //Enter id(s) of CSS Horizontal UL menus, separated by commas
    var csssubmenuoffset=-1 //Offset of submenus from main menu. Default is 0 pixels.

    function createcssmenu2(){
    for (var i=0; i<cssmenuids.length; i++){
      var ultags=document.getElementById(cssmenuids[i]).getElementsByTagName("ul")
        for (var t=0; t<ultags.length; t++){
                            ultags[t].style.top=ultags[t].parentNode.offsetHeight+csssubmenuoffset+"px"
            var spanref=document.createElement("span")
                            spanref.className="arrowdiv"
                            spanref.innerHTML="&nbsp;&nbsp;&nbsp;&nbsp;"
                            ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
            ultags[t].parentNode.onmouseover=function(){
                                            this.style.zIndex=100
            this.getElementsByTagName("ul")[0].style.visibility="visible"
                                            this.getElementsByTagName("ul")[0].style.zIndex=0
            }
            ultags[t].parentNode.onmouseout=function(){
                                            this.style.zIndex=0
                                            this.getElementsByTagName("ul")[0].style.visibility="hidden"
                                            this.getElementsByTagName("ul")[0].style.zIndex=100
            }
        }
      }
    }

    if (window.addEventListener)
    window.addEventListener("load", createcssmenu2, false)
    else if (window.attachEvent)
    window.attachEvent("onload", createcssmenu2)

HTML：

        <div id="navigation">

            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Forums</a></li>
                <li><a href="#">Rosters</a>
                    <ul>
                        <li><a href="#">Counter-Strike: Source</a></li>
                        <li><a href="#">Team Fortress 2</a></li>
                        <li><a href="#">Black Ops 2</a></li>
                        <li><a href="#">Complete Roster</a></li>
                    </ul></li>
                <li><a href="#">Matches</a>
                    <ul>
                        <li><a href="#">Schedule</a></li>
                        <li><a href="#">Results</a></li>
                    </ul></li>
                <li><a href="#">Servers</a></li>
                <li><a href="#">Recruiting</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

    </div>

CSS：

#navigation {
    background: url(images/navigation_bg.gif) repeat-x;
    border-top: #666666;
    border-bottom: #333333;
    height: 59px;
    margin: 0px;
    padding: 0px;
    text-align: center;
    line-height: 59px;
}

#navigation ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    z-index: 100;
}

#navigation ul li {
    position: relative;
    display: inline-block;
    float: left;
}

#navigation ul li a {
    display: bock;
    width: 160px;
    padding: 2px 8px;
    border: 0px;
    text-decoration: none;
    background: url(images/navigation_item_bg.gif) repeat-y left;
    color: #737373;
    font-size: 14px;
    font-weight: bold;
}

#navigation ul li.last a {
    display: bock;
    width: 160px;
    padding: 2px 8px;
    border: 0px;
    text-decoration: none;
    background: url(images/navigation_item_bg.gif) repeat-y left, url(images/navigation_item_bg.gif) repeat-y right;
    color: #737373;
    font-size: 14px;
    font-weight: bold;
}

#navigation ul li ul {
    top: 0;
    left: 0;
    border-top: 1px solid #202020;
    position: absolute;
    display: block;
    visibility: hidden;
    zIndex: 100;
}

#navigation ul li ul li {
    display: inline;
    float: none;
    margin: 0px;
    padding: 0px;
}

#navigation ul li ul li a {
    width: 175px;
    font-weight: bold;
    text-decoration: none;
    background: #000;
    border-width: 0px 1px;
    padding: 0px 5px;
    display: block;
}

#navigation ul li ul li a:hover {
    background: #333333;
}

Answer 1

该脚本需要排除菜单中最顶层的div和ul隐藏：

if (this !== ultags[0].parentNode) {
    this.style.zIndex = 0;
    this.getElementsByTagName("ul")[0].style.visibility = "hidden";
    this.getElementsByTagName("ul")[0].style.zIndex = 100;
}

jsfiddle

为什么我的水平列表会在此代码中消失？

1 个答案: