Bonjour,

sur :
http://icreatorbeta.free.fr/

j'ai dans mon menu des boutons (accueil, blog, contact ....).
En passant la souris dessus, le bouton devient noir INSTENTANÉMENT.

J'aimerai que le bouton devienne noir mais progressivement. Et qu'il redevienne normal en enlevant la souris, progressivement aussi.

Seulement mon code n'a pas l'air de fonctionner.

Je voulais savoir si vous aviez une idée d'où peut venir mon problème ?

Je vous remercie d'avance !

NB : l'animation est appliquée que dans le bouton ACCUEIL, je ferais le reste une fois que le code sera juste

HTML :

[CODE] <!-- BOUTONS ACCUEIL -->

         <nav id="heada">
            <ul id="header-menu" >
               <li class="header-menu-choix" >
               
<a href="#" style="-webkit-   transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out;transition: all 0.8s ease-in-out;">Accueil</a></li>

               <li class="header-menu-choix"><a href="#">Blog</a></li>
               <li class="header-menu-choix"><a href="#">Contact</a></li>
               <li class="header-menu-choix"><a href="#">Parrainage</a></li>
               <li class="header-menu-choix"><a href="#">Produits</a></li>
               <li class="header-menu-choix"><a href="#">Partenaires</a></li>
            </ul>
         </nav>

                    </div>[/CODE]


CSS :

[CODE]
/* ACCUEIL */


#heada {
   width: 100%;
   float:left;
}
#header-menu {
   margin: 0;
   padding: 1ex;
}
.header-menu-choix {
   display: inline-block;
   margin-top: 10px;

}
.header-menu-choix a {
   display: block;
   color: black;
   font-size: 150%;
   padding: 1em;
   font-variant: small-caps;
   text-decoration: none;
   line-height: 10px;
   border-radius: 2ex;
   
   -o-transition: background-color 0.8s; -moz-transition: background-color 0.8s; -webkit-transition: background-color 0.8s; transition: background-color 0.8s;
   

   }
.header-menu-choix a:hover {

   
background: rgb(79,80,86); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(79,80,86,1) 0%, rgba(73,76,79,1) 45%, rgba(10,14,10,1) 60%, rgba(10,8,9,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(79,80,86,1)), color-stop(45%,rgba(73,76,79,1)), color-stop(60%,rgba(10,14,10,1)), color-stop(100%,rgba(10,8,9,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(79,80,86,1) 0%,rgba(73,76,79,1) 45%,rgba(10,14,10,1) 60%,rgba(10,8,9,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(79,80,86,1) 0%,rgba(73,76,79,1) 45%,rgba(10,14,10,1) 60%,rgba(10,8,9,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(79,80,86,1) 0%,rgba(73,76,79,1) 45%,rgba(10,14,10,1) 60%,rgba(10,8,9,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(79,80,86,1) 0%,rgba(73,76,79,1) 45%,rgba(10,14,10,1) 60%,rgba(10,8,9,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5056', endColorstr='#0a0809',GradientType=0 );  /* IE6-9 */
   
   text-decoration: none;
   color: white;   
   }[/CODE]


<config>Mac OS X / Chrome 21.0.1180.89</config>

merci webdd pour cette réponse.

De mon coté j'ai changé, mais ca ne fonctionne toujours pas :



         <nav id="heada">
            <ul id="header-menu" >
               <li class="header-menu-choix" >
               
<a href="#" style="
-webkit-transition-property: background-color;
-webkit-transition-duration: 2s;
-moz-transition-property: background-color;
-moz-transition-duration: 2s;">Accueil</a></li>

               <li class="header-menu-choix"><a href="#">Blog</a></li>
               <li class="header-menu-choix"><a href="#">Contact</a></li>
               <li class="header-menu-choix"><a href="#">Parrainage</a></li>
               <li class="header-menu-choix"><a href="#">Produits</a></li>
               <li class="header-menu-choix"><a href="#">Partenaires</a></li>
            </ul>
         </nav>

                    </div>




.header-menu-choix a {
   display: block;
   color: black;
   font-size: 150%;
   padding: 1em;
   font-variant: small-caps;
   text-decoration: none;
   line-height: 10px;
   border-radius: 2ex;
   
-webkit-transition-property: background-color;
-webkit-transition-duration: 2s;
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
   }