CSS Rollover/Hovering (i.e. Highlighting Text Images)

Err…I edited my post a little bit and it seems to have disappeared. So in case; here’s the original post.

Ive googled a bit, but until now I didnt even now it was call a ‘rollover’. What I want to do for my site black russian comics, is replace my menubar text with images. However, as I quickly became aware of, if you hover the mouse over an image it won’t highlight (or be underlined or whatever little decoration you put on) like the text will.

I know you can do this with javascript, but to my understanding this can be done with regular CSS correct? So the closest I got to getting this right ended up with two distinct problems. First here’s the code.

.archive {
display: block;
float: right;
margin: 0;
padding: 5px 5px 5px 0;
background-image: url('/images/archivenormal.png') ;
}

.archive:hover {
background-image: url('/images/archivehover.png') ;
}

<li class="archive"><a href="http://blackrussiancomics.com/archives" class="hov"><img src="/images/randomblankimage"></a></li>

1. the bit “no-repeat” didn’t work, which would normally go after the image url portion in the CSS. When I put it in the css the image itself didn’t show up at all, perhaps this is a space issue?
2. If I take out no-repeat, it still doesn’t work unless I have an image in the html (so I used a blank .png box for that).

Also note the entire bits of float, display, margin, padding etc did not alter anything. The only way I prevented a repeating of the images was by reducing the html blank image size.

Obviously I ended up with huge misalignments and some of the images even repeated (vertically). I’m not sure if I need to post the menu/menubar CSS stuff as well.

Any help or guides to a tutorial would be appreciated.