Hover plusieurs images

Bonjour,

J'apprendS le CSS depuis peu. Merci d'avance pour votre temps et votre aide.

J'ai crée un menu dans lequel j'ai attribué une image dans chaque case en haut du menu.
Les sous listes n'ont pas d'images.

J'ai mis un code java pour faire du Hover mais le problème c'est que ma commande de Hover est valable pour la totalité du tableau, j'aimerais pouvoir changer.

Voici ce que j'ai:

1tableau
5 colonnes
10 images - 1 par colonne et 5 autres que je n'arrive pas a faire fonctionner.

But: 2 par colonne 1 noir état normal qui devient rouge avec hover
(j'ai deja les 10 images avec changement de couleur faite dans psp).

Ci-dessous les scripts.

JAVA

<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>


CSS

#menu li:hover ul ul, #menu li.sfhover ul ul
left: -999em;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul
{
left: auto;
min-height: 0;
}

#menu a:hover
{
color : #000;
background-image:url(img/mazoutred.png);
background-repeat:no-repeat;
background-position:left center;

Merci infiniment!!!!!