以前一直模模糊糊不知道怎么搞 今天测试了一下........
页面：
<div class="can2">
<ul>
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="about-us.html"><span>About Us</span></a></li>
<li><a href="#"><span>Forum</span></a></li>
<li><a href="projects.html"><span>Portfolio</span></a></li>
<li><a href="contact-us.html"><span>Contact</span></a></li>
</ul>
</div>
css文件：
.can2 ul
{
width:950px; height:25px; float:left; list-style-type:none;
}
.can2 li
{
width:80px; display:inline; float:left;
}
.can2 a
{
text-decoration:none;
color:#6d7586;
display:block;
cursor:pointer;
padding-left:5px;
}
.can2 span
{
padding-right:5px;
}
.can2 a:hover
{
color:#000;
text-decoration:none;
background:url(../images/li-left-bg.gif) left no-repeat;
}
.can2 a:hover span
{
color:#000;
text-decoration:none;
background:url(../images/li-right-bg.gif) right no-repeat;
}
.can2 a:active
{
color:#000;
text-decoration:none;
background:url(../images/li-left-bg.gif) left no-repeat;
}
.can2 a:active span
{
color:#000;
text-decoration:none;
background:url(../images/li-right-bg.gif) right no-repeat;
}
因为背景有两张 所以只能通过写.can2 a:hover 和.can2 a:hover span 来分别设置a span 的背景 如果一张的话就不用这么麻烦了.......