我的 JQuery 导航有什么问题？

Question

目前我的网站有一个下拉菜单设置如下：

HTML：

<ul class="primary-navigation">
    <li><a href="/About" id="about"><span>About</span></a></li>
    <li><a href="/Location" id="location"><span>Location</span></a></li>
    <li><a href="/Site-Plan"><span>Site Plan</span></a></li>
    <li><a href="/Specification"><span>Specification</span></a></li>
    <li><a href="/Gallery"><span>Gallery</span></a></li>
    <li><a href="/Investors"><span>Investors</span></a></li>
    <li class="last"><a href="/Contact"><span>Contact</span></a></li>
</ul>
<ul class="secondary-navigation" id="about-menu">
    <li><a href="/Item1">Item1</a></li>
    <li><a href="/Item2">Item2</a></li>
</ul>   
<ul class="secondary-navigation" id="location-menu">
    <li><a href="/Item1">Amenities</a></li>
    <li><a href="/Item2">Connections</a></li>
    <li><a href="/Item3>Location Map</a></li>
</ul>     

Javascript：

$(document).ready(function () {
    // About
    $("#about").hover(
        function() {
            $("#about-menu").css("display","block");
        },
        function() {
            $("#about-menu").css("display","none");
        }
    );
    $("#about-menu").hover(
        function () {
            $(this).css("display", "block");
        },
        function () {
            $(this).css("display", "none");
        }
    );
    $("#about-menu li").hover(
        function () {
            $("#about-menu").css("display", "block");
        },
        function () {
            $("#about-menu").css("display", "none");
        }
    );
    // Location
    $("#location").hover(
        function () {
            $("#location-menu").css("display", "block");
        },
        function () {
            $("#location-menu").css("display", "none");
        }
    );
    $("#location-menu").hover(
        function () {
            $(this).css("display", "block");
        },
        function () {
            $(this).css("display", "none");
        }
    );
});

CSS：

#header ul.primary-navigation { width: 735px; height: 90px; overflow: auto; position:            absolute; top: 0px; right: 0px; background: #FFFFFF; }
#header ul.primary-navigation li { list-style-type: none; width: 104px; height: 89px;    float: left; position: relative; border-right: 1px solid #FFFFFF; background: #b3b3b3; }
#header ul.primary-navigation li:hover { background: #adcc52; }
#header ul.primary-navigation li.last { border-right: 1px solid #b3b3b3; }
#header ul.primary-navigation li.last:hover { background: #adcc52; border-right: 1px solid #adcc52; }
#header ul.primary-navigation li a { display: block; width: 104px; height: 89px; text-decoration: none; }
#header ul.primary-navigation li a span { color: #FFFFFF; display: block; position: absolute; left: 10px; bottom: 10px; }

#header ul.secondary-navigation { width: 735px; display: none; position: absolute; top:  89px; left: 225px; background: red; overflow: auto; }  
#header ul.secondary-navigation li { width: 735px; height: 30px; position: relative; float: left; /*background: #adcc52;*/ }

导航一开始似乎可以正常工作。但是，似乎每当子菜单处于活动状态时，如果您尝试将鼠标悬停在第一个 <li> 项目之后的任何内容上，子导航就会消失。我一生都无法弄清楚为什么会这样！您可能会认为，因为 <li> 项目嵌套在父 <ul> 中，所以它们都会显示，直到您离开 <ul>，但它似乎并没有那样工作。

有人知道为什么会这样吗？

谢谢！

Answer 1

我想说的是

$("#about-menu li").hover(
    function () {
        $("#about-menu").css("display", "block");
    },
    function () {
        $("#about-menu").css("display", "none");
    }
);

当您离开 LI 时，会调用第二个回调并且整个菜单消失。其他 LI 不会显示，也无法触发菜单再次显示。您需要删除此回调。

另一个技巧，而不是css("display...，只需使用.show() 和.hide()