[Solved] Positioning text that in a LI with a background image

Hi

This is my first post yay...

I am trying to find out how to position text that has a background image in an LI (UL list).

Everytime I try to position it, it moves the entire image as well instead of just the text. ie. if I move the text up, all the images in the UL move up as well. Essentially, the image moves and not the text. Right now the text is at the top of the image and to the left.

Here is my code below. Not sure what I am doing wrong. I'm new at this which is why I am asking for help. I've attached an image of the menu so you can see what I am talking about. I basically want the text to be ON the tab and not above it.

Here is my css for that:

#menu { float: left; width: 418px; height: 97px;

}

#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
float: left;
height: 97px;
text-decoration: none;
}

#menu span {

}

#menu1 { width: 94px; background: url(images/homepage02.jpg) no-repeat left top; }
#menu2 { width: 90px; background: url(images/homepage03.jpg) no-repeat left top; }
#menu3 { width: 100px; background: url(images/homepage04.jpg) no-repeat left top; }
#menu4 { width: 134px; background: url(images/homepage05.jpg) no-repeat left top; }