0

我从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;
}
4

1 回答 1

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

于 2013-06-02T05:35:56.463 回答