Extended css sprites not working with :hover?

<div class="menu">
    <a href="#">foo</a>
    <a href="#">foo</a>
</div>

/* you need to specify its height and width so that they fit with the part of the sprite you want to show */
.menu a{display:block;width: 100px; height: 100px; float:left; margin-right: 10px; text-indent: -9999px;}
/* the background-position is set to top. */
.menu a{background: url(../images/whatever.png) no-repeat top center;}
/* the background-position is set to bottom. */
.menu a:hover{background-position: bottom center;}