Keep background active state as hover?

I have an unordered list and inside an LI and under that is the dropdown menu.

Dropdown uses JQ/JS for the hide/show states. When hovered over a list item as it drops down how can i have a background-color/image stay on that item (main LI) like i would with active states, until the cursor has moved out of the Dropdown area.

Would this require creating another DIV block to contain all the elements? (Menu,Submenu,JS) And if so another few lines of JS if thats the case?

or is there a simpler way to achieve this with css.. as i cannot think of a way. Hope my question is clear and please disregard all the unnecessary HTML and CSS code,

Thanks.

JS

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

HTML

<ul id="nav-container">
    <li><a href="#"><span>Home</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>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <开发者_运维问答/ul>
    </li>

    <li><a href="#"><span>Services</span></a>
    <ul class="dropdown2">
    <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>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    </ul>
    </li>

    <li><a href="#"><span>Contact</span></a>
    <ul class="dropdown3">
    <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>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    </ul>
    </li>
</ul><!--nav-container-->

MENU CSS

#nav-container  {
 display: block;
 width: 900px;
 float: right;
 position: relative;
 left: 120px;
}
#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-image: url(../img/navlist_bg2.gif);
 background-repeat: repeat-x;
 display: block;
 color: #000;

}

#nav-container li a:hover span {
 display: block;
 background-image: url(../img/navlist_bg2.gif);
 background-repeat: repeat-x;
}
#nav-container .active {
 background-image: url(../img/navlist_bg2.gif);
 background-repeat: repeat-x;
}

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

SUB MENU CSS (dropdown2, dropdown3 are the same just made for positioning)

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

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


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

ul.dropdown li a
{
 display: block;
 color: #3C3C3C;
 font-size: 11px;
}
ul.dropdown li a span {
 font-size: 11px;
 color: #3C3C3C;
}

---

JS:

$(function () {
$('.menu1').hover(function () {
$('.link').addClass('active');
$('.dropdown1').show;
}, function () {
$('.dropdown1').hide;
$('.link').removeClass('active');
});
});
});

HTML:

<li class="menu1"><a class="link" href="#"><span>Home</span></a>
<ul class="dropdown1">
<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>

repeat this for all base menu items (hover1, 2, 3, etc)