Horizontal List with different images

I want to have a list that is horizontal and each <li> has different
images. I also want them to change on hover. I want the words to be
below the images as well. Anyone of you styles gurus have any words
of wisdom? Please! :-)

Here is what I have so far.

<!--styles-->
ul#mainNav{
font: bold 80% Verdana;
display : block;
}

ul#mainNav li {
float:left;
width: 15%;
height : 50px;
background-repeat : no-repeat;
background-position : top;
vertical-align: baseline;
}

ul#mainNav a {
color: #cccccc;
text-decoration : underline;
}

ul#mainNav li.aboutUs {
background-image: url(../images/aboutUs_Off.gif);
}

ul#mainNav li.contactUs{
background-image: url(../images/contactUs_Off.gif);
}

ul#mainNav li.home{
background-image: url(../images/home_Off.gif);
}

ul#mainNav li.photos{
background-image: url(../images/photo_Off.gif);
}

ul#mainNav li.shows{
background-image: url(../images/shows_Off.gif);
}

ul#mainNav li a:hover{
color: #990000;
text-decoration : underline;
}

ul#mainNav li .aboutUs a:hover{
background-image: url(../images/aboutUs_Hov.gif);
}

ul#mainNav li .contactUs a:hover{
background-image: url(../images/contactUs_Hov.gif);
}

ul#mainNav li .home a:hover{
background-image: url(../images/home_Hov.gif);
}

ul#mainNav li .photos a:hover{
background-image: url(../images/photo_Hov.gif);
}

ul#mainNav li .shows a:hover{
background-image: url(../images/shows_Hov.gif);
}

<!--html seg -->

<ul id="mainNav">
<li class="home"><a href="#">Home</a></li>
<li class="shows"><a href="#">Shows</a></li>
<li class="photos"><a href="#">Photos</a></li>
<li class="aboutUs"><a href="#">About Us</a></li>
<li class="contactUs"><a href="#">Contact Us</a></li>
</ul>