li背景圖片不顯示

Question

我已經瀏覽了一大堆有類似問題的帖子，但我無法弄清楚我的問題。請有人幫忙，這讓我瘋狂。

以下代碼用於我的網站導航。我希望背景是圖像而不是背景顏色。我還希望背景圖片在懸停時更改。正如我們的貓鼬朋友會說......簡單！......但不適合我。

<div class="sub-menu" id="sub-menu"> 
<ul> 
<li><a class="on" href="#" title=" You Are Here ">&raquo; Overview</a></li> 
<li><a href="graduates-endorsements.html" title=" What Clients Say About The Programme ">Endorsements</a></li> 
<li><a href="graduates-programme.html" title=" Programme Focus, Programme Leader and Venues ">The Detail</a></li> 
<li><a href="graduates-funding.html" title=" Delegate Sponsored Places and Busaries ">Funding</a></li> 
<li><a href="graduates-apply.html" title=" Online application Form ">Apply Online</a></li> 
<li><a class="end" href="graduates-terms.html" title=" Terms &amp; Conditions ">Terms</a></li> 
</ul> 
</div> 


div.sub-menu { position: relative; width: 920px; height: 40px; padding: 0; margin: 0; border-top: solid 1px #FFFFFF; } 
#sub-menu ul { list-style: none; padding: 0; margin: 0; } 
#sub-menu li { float: left; margin: 0; } 
#sub-menu li a { padding: 0 30px; width: 93px; height: 40px; line-height: 36px; text-align: center; float: left; display: block; color: #FFFFFF; text-decoration: none; background-color: #555555; border-right: solid 1px #858585; } 
#sub-menu li a:hover { color: #050505; background-color: #f3b607; } 
#sub-menu li a.on { background-color: #555555; color: #FBAF5D; cursor: default; } 
#sub-menu li a.end { width: 89px; } 
#sub-menu li a.end-on { text-align: center; float: left; display: block; color: #FBAF5D; text-decoration: none; border-right: none; } 


/* Hide from IE5-Mac \*/ 
#sub-menu li a{ float: none } 
/* End hide */ 

#sub-menu { font-weight: normal; font-size: 14px; font-family: verdana; } 

謝謝，我真的很感謝你的幫助。

Answer 1

在你的問題主題中，你說過你希望把背景圖片放在「li」標籤上，但是根據你所顯示的代碼，你已經給出了「a」標籤的背景。

你可以把背景圖像和顏色都在一起，任何標籤「禮」和「a」

例如。 背景：＃00ff00 url（'smiley.gif'）無重複固定中心; 詳情參見： http://www.w3schools.com/cssref/css3_pr_background.asp

如果你想要把懸停效果爲好，實現它的錨「一」的標籤。因爲像ie6這樣的舊瀏覽器沒有內置懸浮效果的內置支持。

使用以下模式。

a{ 
    background: url('img1') no-repeat fixed center; 
} 
a:hover{ 
    background: url('img2') no-repeat fixed center; 
} 

希望它可以幫助你。