滑动门技术

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

效果：

注意：padding-left 和 padding-right 的使用

分别给a和span背景图片