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

Question

我有一个无序列表，在 LI 内，其下方是下拉菜单。

Dropdown 使用 JQ/JS 来隐藏/显示状态。当鼠标悬停在列表项上时，当它下拉时，我怎样才能让背景颜色/图像停留在该项目（主LI）上，就像我在活动状态下一样，直到光标移出下拉区域。

这是否需要创建另一个 DIV 块来包含所有元素？ (Menu,Submenu,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;
}

SUB MENU 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>

对所有基本菜单项（hover1、2、3 等）重复此操作