當被查看時突出顯示子菜單項

我有一個基本上沒有任何內容的無序列表。這裏有一個例子：當被查看時突出顯示子菜單項

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

我不知道這是否是做到這一點還是沒有辦法的辦法。有人可以幫忙嗎？如果您感到困惑，我希望能夠使用css爲第二個ul添加li class =「active」或id =「current」。「活動」和「當前」id和class被動態地應用於正在查看的頁面的列表項目。

謝謝！

來源

2011-06-24 MJ3111

你想要突出的子菜單的或橫向菜單的？您目前的CSS正在改變主頁和資源的背景。但是你的問題似乎是你想突出顯示當前的子菜單（例如第二頁）。 – Luke

使用.active類與背景顏色應該工作，但是，它取決於你有什麼其他的CSS。您必須確保.active或#current的特異性大於默認樣式（#horiz-menu ul li）。此外，一定要仔細檢查它是li具有默認的背景CSS而不是其中的錨。

來源

2011-06-24 19:36:17

嘗試addClass方法JQuery的

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

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

});

來源

2012-02-03 04:57:14 Glen

當被查看時突出顯示子菜單項

回答

相關問題