0

我浏览了大量有类似问题的帖子，但我就是无法弄清楚我的问题。请有人帮忙，这让我发疯。

以下代码用于我的站点导航。我希望背景是图像，而不仅仅是背景颜色。我还希望在悬停时更改背景图像。正如我们的猫鼬朋友所说...简单！....但不适合我。

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

谢谢你，我真的很感谢你的帮助。

4

1 回答 1

0

在您的问题主题中，您说您希望将背景图像放入“li”标签，但根据您显示的代码，您已为“a”标签提供背景。

您可以将背景图像和颜色一起放在任何标签“li”和“a”中

例如。背景：#00ff00 url('smiley.gif') 不重复固定中心；详情参考： http ://www.w3schools.com/cssref/css3_pr_background.asp

如果您也想放置悬停效果，请在锚点“a”标签上实现它。因为像 ie6 这样的旧浏览器没有内置对 li 悬停效果的支持。

使用以下模式。

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

希望它可以帮助你。

于 2012-08-24T11:55:45.423 回答