保持后台活动状态为悬停？

Question

我有一个无序的列表，并在LI内，下面是下拉菜单。

下拉菜单使用JQ/JS作为隐藏/显示状态。当它悬停在列表项上，因为它下降了，我怎么能有一个背景颜色/图像留在该项目（主要LI），就像我将与活动状态，直到光标已移出下拉区域。

这是否需要创建另一个DIV块来包含所有元素？ （菜单，子菜单，JS）如果是这样的话，还有几行JS？

还是有一个简单的方法来实现这与CSS ..作为我想不到的方式。 希望我的问题是明确的，请忽略所有不必要的HTML和CSS代码，

谢谢。

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

子菜单，CSS（dropdown2，dropdown3只是定位由相同）

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

Answer 1

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> 

重复这个对所有基地菜单项（悬停1，2，3等）