CSS Sprites

Jeg har et problem med en kode som ikke gider virke... min kode ser ud om følgende:
HTML:
<ul id="navlist">
<li id="nav01"><a href="#"><!--Behandling--></a></li>
</ul>

CSS:
#navlist {
position:relative;
background-image:url(images/navi.png);
height:25px;
}
#navlist li {
position:absolute;
display: inline;
list-style-type: none;
}
#navlist li, #navlist a {
height: 25px;
display: block;
}
#nav01 {
left:416px;
width:76px;
height:25px;
}
       
#nav01 a:hover {
background: transparent url(navi.png) -416px -25px no-repeat;
}

Billedet jeg har brugt kan findes her:
www.forstenet.dk/school/semesterprojekt/images/navi.png

og selve sitet som jeg arbejder på findes her:
www.forstenet.dk/school/semesterprojekt/index.html

den info jeg har om dette stammer fra følgende link:
http://www.alistapart.com/articles/sprites

Hvad gør jeg forkert, hvorfor vil den ikke lave en hover over billedet?