<div class="nav fr">
<ul >
<li class="home">
<a href="#"><span>首页</span></a>
</li>
<li class="home">
<a href="#"><span>帮助与反馈</span></a>
</li>
<li class="home">
<a href="#"><span>公众平台</span></a>
</li>
<li class="home">
<a href="#"><span>开放平台</span></a>
</li>
<li class="home">
<a href="#"><span>微信支付</span></a>
</li>
<li class="home">
<a href="#"><span>微信网页版</span></a>
</li>
<li class="home">
<a href="#"><span>表情开放平台</span></a>
</li>
<li class="home">
<a href="#"><span>微信广告</span></a>
</li>
</ul>
</div>
.nav {
padding-top: 21px;
}
.nav li {
float: left;
}
.nav a {
display: inline-block;
padding-left: 16px;
margin: 0 3px;
background: url("../images/head.png") no-repeat scroll;
color: #ffffff;
line-height: 33px;
}
.nav a:hover,.nav a:hover span {
background-image: url("../images/ao.png") ;
}
.nav a span {
display: inline-block;
padding-right: 16px;
cursor: pointer;
background: url("../images/head.png") no-repeat scroll 100%;
}
效果: