nav sprites

/*---css--- sprite is 300px x 300px with 100px by 100px shapes*/ 
 
#nav{position: relative;  top: 15px; max-height: 120px;  left: -25px;}
 
#nav ul {display: block; max-height: 100px;}
 
#nav ul li { font-family: 'Arial Black', sans-serif; font-size: 15px;
    letter-spacing: 3px; text-decoration: none; text-transform: capitalize; line-height: 20px; text-align:center; }
 
#nav ul li a {display: block; color: #fff;  width: 100px; height: 100px; background: url("images/homepagenavsprite.png") no-repeat; float: left;
   }
#nav ul li a span{display: block; margin-top: 35px; margin-left: 18px;}
 
#nav li.home a, #nav li.home a:link, #nav li.home a:visited {background-position: 0 0; outline:0; }
#nav li.home a:hover {background-position: 0 -100px;}
#nav li.home a:focus, a:active {background-position: 0 -200px;border: none; outline:0;}
 
#nav li.work a, #nav li.work a:link, #nav li.work a:visited {background-position:0 0; }
#nav li.work a:hover {background-position: 0px -100px;}
#nav li.work a:focus, a:active {background-position: 0 -200px;border: none; outline:0;}
 
#nav li.blog a, #nav li.blog a:link, #nav li.blog a:visited {background-position:0 0; }
#nav li.blog a:hover {background-position: 0px -100px;}
#nav li.blog a:focus, a:active {background-position: 0 -200px; border: none; outline:0;} 
 
------------html
 
 <div id="nav">
      <ul id="navsprite">
         <li class="home"><a href="#"><span>About</span></a></li>
         <li class="work"><a href="#"><span>Work</span></a></li>
          <li class="blog"><a href="#"><span>Blog</span></a></li>
    </ul>
    </div>