Simple Drop Down

Simple Drop Down

Well I have used this same script a few times, but this time I am having an issue, When I hover the text the drop down shows, as soon as I try to hover the drop down it will disappear.

I am also trying to make the background stick on main text (hover text) untl the mouse moves off. Been stuck on this for hours.

I upload it temp to view here: http://www.sukhgill.ca/Test/

Here is my HTML

<div class="header-nav">
                <ul id="navigation">
                    <li><a href="">home</a></li>
                    <li>
                        <a href="">post</a>
                        <ul>
                            <li><a href="/card-products">Cards</a></li>
                            <li><a href="/clothing">Clothing</a></li>  
                            <li><a href="/comics">Comics</a></li> 
                            <li><a href="/games">Games</a></li> 
                            <li><a href="/graphic-novels">Graphic Novels</a></li>
                            <li><a href="/magazines">Magazines</a></li> 
                            <li><a href="/novels">Novels</a></li> 
                            <li><a href="/toys-and-models">Toys & Models</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="">products</a>
                        <ul>
                            <li><a href="/card-products">Cards</a></li>
                            <li><a href="/clothing">Clothing</a></li>  
                            <li><a href="/comics">Comics</a></li> 
                            <li><a href="/games">Games</a></li> 
                            <li><a href="/graphic-novels">Graphic Novels</a></li>
                            <li><a href="/magazines">Magazines</a></li> 
                            <li><a href="/novels">Novels</a></li> 
                            <li><a href="/toys-and-models">Toys & Models</a></li>
                        </ul>
                    </li>
                    <li><a href="">users</a></li>
                    <li><a href="">settings</a></li>
                    <li><a href="">logout</a></li>
                </ul>
            </div>


Here is the CSS:

.header-nav #navigation { 
    padding: 0px;  
    list-style: none;
    font-family: Arial;
}

#navigation li {
    float: left;
    display: block;
    position: relative;
    margin: 0px;
    font-size: 24px;
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
    background: #FFA200;
    border: 0px solid #FFA200;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
}

#navigation li a {
    color: #FFFFFF;
    text-decoration: none;
    padding-left: 20px;
    padding-right: 20px;
    border: 0px solid #000000;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
}

#navigation li a:hover {
    color: #36AD41;
    text-decoration: none;
    background: #000000;
}

#navigation li.active {
    color: #FFFFFF;
    text-decoration: none;
    background: #000000;
}

#navigation li a.selected {
    color: #4188B6;
    background-color: #000000;
    background: #000000;
}
   
/* submenu, it's hidden by default */
#navigation ul {
    position: absolute; 
    display: none;
    margin: 0 0 0 0px;
    padding: 0;
    list-style: none;
    border: 1px solid #000000;
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-bottomright: 3px;
}       

#navigation ul li {
    width: 100%;
    float: left;
    background-color: #000000;
    border-top: 1px solid #000000;
    font-size: 12px;
    padding: 0px;
    margin: 0px;
    -moz-border-radius: 0px;
    text-transform: capitalize;
}
       
/* display block will make the link fill the whole area of LI */
#navigation ul a {
    display: block; 
    height: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    color: #FFFFFF;
}
       
#navigation ul a:hover {
    text-decoration: none;
    color: #36AD41;   
}


Finally the JS:

$(document).ready(function() {
    $('#navigation li').hover(
        function () {
            $('ul', this).stop(false,true).slideDown('slow', function() {});
        },
        function () {
            $('ul', this).stop(false,true).slideUp('slow', function() {});
        }
    );
});



Any help would be great, I just need a simple hover over drop down menu one level.