What's wrong with my JQuery navigation?

Currently I have a drop down menu setup for my website as follows:

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;*/ }

The navigation appears to be working at first. However it seems that whenever a submenu is active, if you try to hover over anything after the first <li> item, the sub nav disappears. I can't for the life of me figure out why this is happening! You'd think that because the <li> items are nested within a parent <ul>, that they'd all be displaying until you move off the <ul> but it doesn't seem to work that way.

Does anyone know why this is happening?

Thanks!

---

I would say that in

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

When you leave an LI, the second callback is called and the whole menu disappears. Further LIs are not shown and cannot trigger the menu to be shown again. You need to remove this callback.

Another trick, instead of css("display..., just use .show() and .hide()