CSS。活躍的背景

Question

我是currentley試圖做一個網站導航欄，當頁面處於活動狀態時，我希望導航欄背景與主體背景相同。 但是，當我這樣做時，背景僅包裹文本而不是導航欄的全部高度。

我的HTML

<div id="navbar"> 

<ul> 
<li><a href="index.html" class="active"> Home</a> </li> 
<li><a href="purchase.html">Purchase</a> </li> 
<li><a href="contact.php ">Contact</a> </li> 
<li><a href="Portfolio.html">Portfolio</a> </li> 
</ul> 
</div> 

我的CSS

#navbar ul{ 
list-style:none; 
margin:0; 
background-image:url('Images/black.png'); 

text-align:center; 

height:60px; 

} 

#navbar ul{ 

list-style-type:none; 
text-align:center; 
color:#fff; 

} 
#navbar ul li{ 
display:inline; 

} 
#navbar ul li a{ 
color:#36b6f4; 
text-decoration:none; 
font-size:30px; 
margin:30px; 

} 


#navbar ul li a.active{ 
height:60px; 
background-image:url('Images/background.jpg'); 


} 

Answer 1

我已經爲你創建一個小提琴：

http://jsfiddle.net/RKRHE/1/

我有顏色改變你的背景圖片（因爲我沒有你的圖像）。

問題是display: inline;。你可以把float: left;

你可以從小提琴中複製我的代碼，並改變你的圖像的背景顏色。

希望這會幫助你！