How do I change JUST the position of text in a link?

I have background images in my nav menu, that switch to another background image on hover. It's a button that appears to depress when hovering. I'd like to bump the text down a bit on hover also so it seems "attached" to the button, but changing any position on hover also changes the position of the background image.

How can I change JUST the hover text position and leave the hover bg image in place?

 

Try changing padding-top for the link element, for example:

#nav a:hover {
padding-top: 3px;
}

 

It works but it causes the entire menu below it to shift down (it's a vertical menu). I don't understand why.

 

It probably has height defined so padding will add to that. You need to decrease the height of the element you add padding to to make up for it.