Hi, had a brain freeze with sprites here.

I've set up an unordered list with anchors which I have made block level elements and applied an image which moves on hover.

Now I just want to move the text in the anchor itself with some padding left and top but the actual block level element also moves and gets bigger.

I've tried to be very specific when targeting the anchor but with no joy yet.

I've put the code below and would appreciate any thoughts.

Thanks in advance.

HTML
Code:
<nav id="navbar">
<ul>
<li><a href="#" class="activeLink">Home</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
</ul>
</nav><!--End of nav-->
CSS
Code:
#navbar {
		
			float: left;
			font-size: 85%;
			background-color: #fefafc;
			width: 200px;
			margin: 0;
			padding: 0;
			}
			
#navbar ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
			}
			
#navbar a {
			display: block;
			width: 200px;
			height: 51px;
			background-image: url('nav.jpg');
			background-repeat: no-repeat;
			background-position: 0px 0px;
			text-decoration: none;
			list-style-type: none;
			color: #666;
			background-color: #fefafc;
			padding-left: 45px;
			padding-top: 15px;
			outline-style: none;
			}
			
#navbar a:hover {
			display: block;
			width: 200px;
			height: 51px;
			background-image: url('nav.jpg');
			background-repeat: no-repeat;
			background-position: 0px -51px;
			color: #666;
			background-color: #fefafc;
			}
			
#navbar a.activeLink {
			background-image: url('nav.jpg');
			background-repeat: no-repeat;
			background-position: 0px -51px;
			color: #666;
			background-color: #fefafc;
			cursor: default;
			}