表示されているときにサブメニューを強調表示する

Question

基本的には、メニュー内に並べられたリストがあります。次に例を示します。

<div id="horiz-menu" class="moomenu"><div class="wrapper"> 
    <ul class="menutop"> 
    <li><a href="something.html"><span>Home Page (top menu item)</span></a> 
     <ul> 
     <li><a href="something2.html"><span>Second page (sub menu item)</span></a> 
     </li> 
     </ul> 
    </li> 
    <li class="parent active"><a href="something3.html"><span>Resources (top menu item)</span></a> 
     <ul> 
     <li id="current" class="active"><a href="something4.html"><span>Third Page (sub menu item)</span></a> 
     </li> 
     <li><a href="something5.html"><span>Fourth Page (sub menu item)</span></a> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</div></div> 

上部のメニュー項目のように見えるようにスタイル設定され、トップメニュー項目がホバーしたときHORIZのナビゲーションメニューとサブメニュー項目がリストダウン垂直降下（なしスクロール）されています;他の賢明な隠された。それはすべて動作します。私の質問は、訪問者がそのページ上にいるとき（単にそのメニュー項目上にホバーオーバーするのではなく）、サブメニュー項目が強調表示される（背景色が変わるはずです）ようにCSSをコードする適切な方法でしょうか？

私はこれを試してみました：

#horiz-menu ul li.active {background-color:#000;} 
#horiz-menu ul li#current {background-color:#000;} 

これは、これを行うかないための方法である場合、私は知りません。助けてもらえますか？混乱している場合は、li class = "active"またはid = "current"を使用して2番目のulを色付けするためにCSSを使用できるようにしたいと思います。 「アクティブ」および「現在の」IDおよびクラスは、表示されているページのリスト項目に動的に適用されます。

ありがとうございます！

Answer 1

しかし、背景色を使用して.activeクラスを使用することは、他のどのCSSを使用しているかによって異なります。 .activeまたは#currentの特異性がデフォルトのスタイリング（#horiz-menu ul li）よりも大きいことを確認する必要があります。また、内部にアンカーではなくデフォルトのバックグラウンドCSSがあるliであることを再度確認してください。

Answer 2

jQueryの

$("a.classname").click(function(){ 

    $("li#idname").addClass("active"); 

});