バックグラウンドアクティブ状態をホバーとして保持しますか？

Question

私は並べ替えられていないリストを持ち、LIの中にドロップダウンメニューがあります。

ドロップダウンは、非表示/表示状態にJQ/JSを使用します。カーソルがドロップダウンエリアから移動するまで、リストアイテムの上にカーソルを置くと、そのアイテム（メインLI）上にバックグラウンドカラー/イメージが表示されます。

すべての要素を含むために別のDIVブロックを作成する必要がありますか？ （Menu、Submenu、JS）もしそうならJSの別の数行は？

これを達成するための簡単な方法がありますか？私は方法を考えることができません。 私の質問が明確で、不必要な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

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（dropdown2、単に位置決めのために作られた同じdropdown3です）：

$(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など）