I’m working on navigational links today and I’m running into an issue when trying to change the background on the a:hover state.
I have the navigation displaying a background image initially, then on hover, change to the color #fff. For some reason, when I hover over the link extra padding is being added to the left and right of the link.
This is occurring because at first you are applying the background to the <li>, but then on the hover you’re applying it to the <a>, you should really pick one of those and stick with it throughout. In this case, I would always have the background image on the <a>.
You may not need to actually use Sprites in this particular case, but the code Chris uses should help you figure out what elements to put the styling on (it can be confusing for sure):