Effet rollover sur menu

Bonjour à tous !
voila je voudrais faire un effet rollover sur mon menu.

le <div="colone_gauche>" ou ce trouve mon menu fais 317px de largeur
j'ai mis une couleur d'arrière plan différente sur chaque <li> et mon menu ne fais que 75% de sa largeur.
je voudrais que lorsque la souris passe, la largeur de mon <li> s'adapte à la totalité de "<div="colone_gauche>"

Ci-joint le code html du menu

<div id="colone_gauche">
<ul id="navigation">
   <li class="index"><a href="fr/." title="">Accueil</a></li>
   <li class="informations-generales"><a href="fr/informations-generales" title="">Informations Générales</a></li>
   <li class="programme select"><a href="fr/programme" title="" class=" aselect">Programme</a></li>
   <li class="inscription"><a href="fr/inscription" title="">Inscription</a></li>
   <li class="Hotellerie"><a href="fr/Hotellerie" title="">Hôtellerie</a></li>
   <li class="partenaires"><a href="fr/partenaires" title="">Partenaires</a></li>

   <li class="contact last"><a href="fr/contact" title="">Contact</a></li>
</ul>
</div>

et son css

#navigation {}
#navigation li {padding:0.2em 1em; text-align:right; margin:0 0 1em 0; width:75%;}
#navigation li a {color:#000;}
#navigation li a:hover, #navigation li a.aselect { color:#fff; margin:0 0 1em 0 !important; width:100% !important;}

#navigation li.index { background:#1aaeb2; font-weight:bold;}
#navigation li.actualites { background:#a7c386; font-weight:bold;}
#navigation li.contact { background:#a7c386; font-weight:bold;}
#navigation li.Hotellerie { background:#aacbda; font-weight:bold;}
#navigation li.inscription { background:#c7d8ae; font-weight:bold;}
#navigation li.partenaires { background:#1aaeb2; font-weight:bold;}
#navigation li.informations-generales { background:#a7c386; font-weight:bold;}
#navigation li.programme { background:#8ccdc9; font-weight:bold;}

J'ai essayé pas male de variante, mais je n'ai jamais réussit à trouver... donc si quelqu'un pourrais me donner quelques conseilles...
Merci de votre aide
Modifié par Kweb (10 Sep 2009 - 18:06)

As-tu essayé en mettant en gros :

a{
    display:block;
    width: 75%;
}

a:hover{
   width: 100%;
}

et en supprimant le width sur les li ?

Avec ton code actuel les a au survol devraient être à 100% de la taille du li donc à 75% de la taille du ul. Et encore cela ne doit pas être le cas car le a est un élément inline par défaut et du coup le width ne s'applique pas.

Tu fais un

li:hover{...}

#navigation li {padding:0.2em 1em; text-align:right; [b]margin:0 25% 1em 0;[/b]} 
...
...
[b]#navigation li:hover {margin-right:0;}[/b]

Enlèves le width du <li>
Modifié par Sib (11 Sep 2009 - 21:24)

[quote=Sib]Tu fais un

li:hover{...}

Le problème de la pseudo-classe sur le li est que IE n'en tient pas compte il me semble (sûr pour IE6, doute pour IE7 mais il me semble que c'est pareil, ne sait pas sur IE8); raison pour laquelle j'ai mis précédemment le hover sur le a.

lefou a écrit :
Le problème de la pseudo-classe sur le li est que IE n'en tient pas compte

Seul IE6 est concerné par ce problème ( donc on s'en fout ).

Benjamin D.C. a écrit :

Seul IE6 est concerné par ce problème ( donc on s'en fout ).

Je ne suis pas tout à fait d'accord avec le "on s'en fout" (du moins en ce qui me concerne). En effet, au vue des stats de visite de mon site, il y a encore plusieurs internautes qui n'ont pas mis à jour IE. Sur le mois dernier, selon Analytics, cela représente environ 10% des visiteurs, tout navigateur confondu !!!

Je vous remercie pour vos réponse... je me pencherais sur le probléme cette apres'm car je n'ai pas le temps ce matin...
vous tiens au courant.

lefou a écrit :

Je ne suis pas tout à fait d'accord avec le "on s'en fout" (du moins en ce qui me concerne). En effet, au vue des stats de visite de mon site, il y a encore plusieurs internautes qui n'ont pas mis à jour IE. Sur le mois dernier, selon Analytics, cela représente environ 10% des visiteurs, tout navigateur confondu !!!

Et donc? Environ une personne sur dix ne verra pas de rollover sur ton menu. Est-ce réellement problématique?

Benjamin D.C. a écrit :

Et donc? Environ une personne sur dix ne verra pas de rollover sur ton menu. Est-ce réellement problématique?

Il est vrai que pour ce cas là ça ne pose pas de problème pour la navigation donc pourquoi pas.