CSS懸停菜單顯示活動菜單項

我有以下的CSS：CSS懸停菜單顯示活動菜單項

#nav ul li {float: left; margin-right: 10px; } 
#nav ul li a { display: block; color: #fff; width: 100px; line-height:35px; background: #15612e; padding-left:16px;} 
#nav ul li a:hover { background-color: #ea8206;}

可正常工作。我現在想要做的是有一個這樣的類：

a.active { background-color: #ea8206;}

，我想指定哪個菜單項的網頁上選擇，但是這是行不通的。

我想這是與優先順序做，並嘗試各種組合：

#nav ul li a.active {background-color: #ea8206;}

我想我只是用正確的組合掙扎。

和HTML是：

 <div id="nav"> 
      <ul> 
       <li><a href="#" class="active">Home</a></li> 
       <li><a href="#">Buy</a></li> 
       <li><a href="#">Sell</a></li> 
       <li><a href="#">Search</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div>

任何人都可以點我在正確的方向？

非常感謝

來源

2013-12-09 Graeme

我們需要你的HTML爲好，不只是CSS。創建一個小提琴（http://jsfiddle.net）或在您的原始問題中發佈您的HTML。 – disinfor

您是否已將課程添加到您的鏈接？ –

HTML添加 - 謝謝你們 – Graeme

這裏有一個小提琴：http://jsfiddle.net/moonspace/aKLUS/

這是所有關於特異性... 正如你已經提到的CSS「A」類，但與「#nav UL它們的前綴'這些將覆蓋一個簡單的'a.active'定義。因此，在a.active之前添加'#nav ul'（按照小提琴），它會起作用。。。

#nav ul li a { display: block; color: #fff; width: 100px; line-height:35px; background: #15612e; padding-left:16px;} 
#nav ul li a:hover { background-color: #ea8206;} 
#nav ul li a.active{ background-color: red; }

來源

2013-12-09 20:41:16

認爲我曾嘗試過這種組合。很明顯不是。非常感謝 – Graeme

CSS懸停菜單顯示活動菜單項

回答

相關問題