Couleurs de background dans un menu vertical

Bonjour bonjour,

Voici mon problème, je mets en place un menu vertical, la-dessus pas grand chose de difficile ou qui me pose problème. En fait, c'est mon effet de a:hover que j'ai du mal à configurer.

Voilà 2 petits aperçus pour que ce soit plus clair.

http://img510.imageshack.us/i/cap1r.jpg/
Dans ce premier exemple, sur rollover du lien, le background se colore depuis le bord gauche, jusqu'à la fin du mot.

http://img297.imageshack.us/i/cap2h.jpg/
Dans ce second exemple, l'état normal du lien, c'est le background coloré du début du mot à la fin de la ligne.

Ce que je veux, c'est l'état de la capture numéro 2, et que sur rollover, la ligne se complète ( que toute la ligne soit colorée ). Je pensais qu'il fallait jouer sur les marges internes, mais en vain.
A mon avis, mon problème est d'ordre hiérarchique, et de confusion entre les attributs parents/enfants.

Dans l'espoir que vous puissiez m'aider, ou tout du moins me pointer la direction à suivre, je poste mon code :

#menul {
  height: 335px;
  background-image: url(img/fondcol.png);
 
}

ul#menu {
  float:right;
  list-style-type: none;
  margin: 0;
  padding-top: 50px;
}

.historique a:hover {
  background: #bb7b93;
 }

li#menu a {
  text-align: left;
 }

ul#menu a {
  padding-left: 70px;
  padding-right: 10px;
  text-decoration: none;
  color: white;
}
	 
ul#menu a:hover {
     }

et pour le html :

<div id="menul">
                    
                    <ul id="menu">
    					<li class="historique"><h3><a href="#">Historique</a></h3></li>
    					<li class="historique"><h3><a href="#">&Eacute;diteur</a></h3></li>
    					<li><h3><a href="#">Imprimeur</a></h3></li>
  						<li><h3><a href="#">Ateliers</a></h3></li>
                        <li><h3><a href="#">Catalogue</a></h3></li>
                        <li><h3><a href="#">Stages &amp; locations</a></h3></li>
                        <li><h3><a href="#">Actualit&eacute;s</a></h3></li>
 					</ul>
                    
                    </div>

Modifié par jbbourgois (01 Oct 2009 - 17:32)

Tu peux utiliser un background avec une image pour ton état n°1 et lorsque tu passe sur le lien tu complete avec un background color de la meme couleur.

Oui, mais si je fais cela, à quel id dois-je l'appliquer cette image de fond ? De plus, appliquer une image de fond avec mon texte en image, niveau accessibilité, c'est pas top top.

Une autre aide serait la bienvenue, je n'ai toujours pas réussi à obtenir ce que je voulais...

Hello,

Défini une largeur à ton <ul> en le passant en display:block sinon ça ne fonctionnera pas.
Ensuite tu met un hover sur tes <li>

#menu li:hover{background:#ta-couleur;}