通过图片定位显示图片的不同部分（css）

.top .menu .mainmenu li a{width:101px;height:23px;display:block;background-repeat:no-repeat;}

.top .menu .mainmenu li a.Home{background:url(http://www.../image/menu-1.gif);}
.top .menu .mainmenu li a.Article{background:url(http://www.../image/menu-1.gif);}
.top .menu .mainmenu li a.Mall{background:url(http://www...//image/menu-1.gif);}
.top .menu .mainmenu li a.Radio{background:url(http://www.../image/menu-1.gif);}
.top .menu .mainmenu li a.Event{background:url(http://www.../image/menu-1.gif);}
.top .menu .mainmenu li a.Temp{background:url(http://www.../image/menu-1.gif);}
.top .menu .mainmenu li a.Home:hover,.top .menu .mainmenu li a.Article:hover,.top .menu .mainmenu li a.Mall:hover,.top .menu .mainmenu li a.Radio:hover,.top .menu .mainmenu li a.Event:hover,.top .menu .mainmenu li a.Temp:hover{background-position:bottom;}

.top .menu .mainmenu li a span{display:none;}

使用方法：

 <div class="top">
            <div class="menu">
<div class="mainmenu">
<ul>
<li>         
            <a class="Home" id="Home" href=".." title="招聘会"><span>招聘会</span></a>
            </li>
</ul>
</div>
</div></div>