Keep Active Background on LI Hover?

I am using jquery for the dropdown and i want to be able to display background-color / image when
i hover over my list item and so it stay active when the submenu shows and goes off when the mouse moves off it
I am not sure if this will require changes to my JS and Html could someone help me with this, thanks.

I have put the page on jsfiddle with that you can see the live code and make changes etc.

LIVE CODE
http://jsfiddle.net/datastream/REJG2/3/

here is the same code-

JS

$(function () {
$('.dropdown').each(function () {
$(this).parent().eq(0).hover(function () {
$('.dropdown:eq(0)', this).show();
}, function () {
$('.dropdown:eq(0)', this).hide();
});
});
});

HTML

<div class="navBG">
<ul id="nav-container" name="nav-container">
<li class="active-link"><a href="#"><span>Home</span></a></li>

<li><a href="#"><span>Products</span></a>
<ul class="dropdown">
<li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
<li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
<li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
<li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
<li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
<li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
</ul>
</li>



<li><a href="#"><span>Menu</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul><!--nav-container-->
</div>
/* NAV
*************************/
.navBG {
    background-color: #0A5319;
    height: 100px;
    width: 900px;
    margin: 0 auto;
    background-repeat: repeat-x;
}
#nav-container  {
    display: block;
    width: 900px;
    float: right;
    position: relative;
    left: 120px;
    top: 0px;
}
#nav-container li a span {
    display: inline;
    height: 36px;
    padding-top: 12px;
    padding-left: 13px;
    padding-right: 14px;
    float: left;
}
#nav-container .active-link span   {
    background-color:#ccc;
    background-repeat: repeat-x;
    display: block;
    color: #000;

}

#nav-container li a:hover span {
    display: block;
    background-color:#ccc;
    background-repeat: repeat-x;
}

#nav-container li  {
    list-style-type: none;
    display: inline;
}

#nav-container li a {
    list-style-type: none;
    color: #FFF;
    font-size: 14px;
    font-family: "Myriad Pro";
    text-decoration: none;
    float: left;
    padding-left: 8px;
}
#nav-container li a:hover {
    color: #575757;
}
/* NAV
*************************/

/* NAV DROPDOWN
*************************/

ul.dropdown
{
    margin: 0;
    padding: 0;
    display: block;
    position: absolute;
    z-index: 9999;
    top: 100%;
    width: 300px;
    display: none;
    left: 80px;
    background-color: #eee;
    font-size: 11px;
    height: 90px;
}

ul.dropdown ul.dropdown
{
    top: 0px;
    left: 95%;
}


ul.dropdown li
{
    margin: 0;
    padding: 0;
    float: none;
    position: relative;
    list-style: none;
    display: block;
    color: #3C3C3C;
    line-height:20px !important;
}

ul.dropdown li a
{
    display: block;
    color: #3C3C3C;
    font-size: 11px;
}
ul.dropdown li a span {
    font-size: 11px;
    color: #3C3C3C;
}
ul.dropdown li  a .subtxt{
    font-size: 11px;
    color: #3C3C3C;
    height:20px;
    background: none !important;
    z-index: 5;
}
ul.dropdown li a:hover .subtxt {
    font-size: 11px;
    color: #060;
    background-repeat: repeat-x;
    background-position: bottom;
    background: none !important;
    text-decoration:underline;
}

/* NAV DROPDOWN
*************************/

The way to do this is to make the drop down links block elements and add all the background colors and padding to the link element. Then you just need to apply the color change to the a:hover. By the way you don’t need to use the ‘dropdown’ class. Just ‘ul ul’. less is more.

E