<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul> <li><a class="home" href="javascript:;"><span>home</span></a></li> <li><a class="about" href="javascript:;"><span>about</span></a></li> <li><a class="services" href="javascript:;"><span>services</span></a></li> <li><a class="portfolio" href="javascript:;"><span>portfolio</span></a></li> <li><a class="contact" href="javascript:;"><span>contact</span></a></li> </ul> </body> </html>
*{margin:0;padding:0;} body{background-color:#000;} ul{list-style:none;margin:200px;} li{width:38px;height:39px;padding:3px 0;position:relative;} a{display:block;width:38px;height:39px;background: url(http://www.100sucai.com/democode/1/img/navigation.jpg) no-repeat;} .home{} .about{background-position:-38px 0} .services{background-position:-76px 0} .portfolio{background-position:-114px 0} .contact{background-position:-152px 0} span {width: 0;left: 38px;position: absolute;overflow: hidden;font-family: 'Myriad Pro';font-size: 18px;font-weight: bold;line-height: 39px;text-align: center;-webkit-transition: 0.25s;-moz-transition: 0.25s;transition: 0.25s;} .home span{background-color:#7da315;color:#3d4f0c;text-shadow:1px 1px 0 #99bf31;} .about span{background-color:#1e8bb4;color:#223a44;text-shadow:1px 1px 0 #44a8d0;} .services span{background-color:#c86c1f;color:#5a3517;text-shadow:1px 1px 0 #d28344;} .portfolio span{background-color:#d0a525;color:#604e18;text-shadow:1px 1px 0 #d8b54b;} .contact span{background-color:#af1e83;color:#460f35;text-shadow:1px 1px 0 #d244a6;} a:hover span{width:120px;}