Menu graphique horizontal avec rollover

Bonjour à tous.
D'abord je voudrais m'excuser pour l'éventuelle redondance de ma question mais je peux vous assurer chercher, fouiner, je ne trouve de réponse nulle part!

Alors voilà.
Je suis en train d'essayer de créer un menu horizontal avec 4 éléments graphique. Au passage de la souris, le rollover devant changer un des éléments en son équivalent actif cliquable.
Le problème c'est que je constate que les deux png (donc de l'élément inactif et de celui qui l'est, sur lequel la souris passe, se superpose lors de cette occasion).

Voilà mon bout de code pour le html :

<div id="menu">     
                 <ul> 
                                                              
                     <li id="nouveautes"><a href="#1"><img src="imario/sousmenu/menu-nouveautes-inact.png" alt="Nouveaute" /></li>
                     <li id="roman"><a href="#2"><img src="imario/sousmenu/menu-roman-inact.png" alt="Roman" /></li>
                     <li id="noveliste"><a href="#3"><img src="imario/sousmenu/menu-noveliste-inact.png" alt="Noveliste" /></li>
                     <li id="etpuis"><a href="#4"><img src="imario/sousmenu/menu-etpuis-inact.png" alt="Nouveaute" /></li>   
                   
                 </ul>
                 
            </div>

et voici celui pour le css :

#menu
{
    float:left;
    width: 500px;
    height: 56px;
    margin-left: 20px;
    margin-top: -30px;
    background-image: url("imario/menu/fondmenu.png");
    background-repeat:no-repeat;
    padding: 0px;
}

ul
{
  list-style-type: none;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
}

#nouveautes, #roman, #noveliste, #etpuis
{
 float: left;
 width: 120px;
 height: 27px;
 margin: 0 ;
 padding: 0 ;
}

#nouveautes:hover
{
  width: 120px;
  background-image:url("imario/sousmenu/menu-nouveautes-act.png");
  background-repeat: no-repeat;
}

#roman:hover 
{
  width: 120px;
  background-image:url("imario/sousmenu/menu-roman-act.png");
  background-repeat: no-repeat;
}

#noveliste:hover 
{
  width: 120px;
  background-image:url("imario/sousmenu/menu-noveliste-act.png");
  background-repeat: no-repeat;
}

#etpuis:hover 
{
  width: 120px;
  background-image:url("imario/sousmenu/menu-etpuis-act.png");
  background-repeat: no-repeat;
}

Voilà merci beaucoup.

PS: je sais très bien que mon code n'est pas encore très optomisé et surtout ne permet pas un affichage correct pour les personnes soufrant de déficits visuels (en particulier dans la définition des li), mais j'y reviendrais certainement dans une autre question si je ne trouve la réponse avant.