Comment faire de la pure CSS menu déroulant apparaît avec un fade in/lentement

Comme le titre le suggère, je suis en train de faire une pure CSS menu déroulant. La seule chose c'est que je ne peux pas obtenir la liste déroulante se fanent lentement peu importe ce que j'ai essayé.

Voici le JSFiddle
http://jsfiddle.net/UWgCV/

Pour info Ce n'est pas mon terrible de code, c'est à partir de la précédente designer qui a abandonné le projet.

Grâce.

edit: j'en ai besoin pour accompagner ce post avec le code en raison de la jsfiddlet lien, voici donc le menu.

    <li><a href="/emergencyservices/whatwedo.php" accesskey="3" title="">EMERGENCY SERVICE &nbsp; &nbsp;|</a>
                   <ul>
                   <li><a href="/emergencyservices/whatwedo.php">&nbsp;What We Do</a></li>
                   <li><a href="/emergencyservices/howstaffed.php">&nbsp;How We Are Staffed</a></li>
                   <li><a href="/emergencyservices/referralemerghandling.php">&nbsp;Emergency/Referral Procedure&nbsp;</a></li>
                   <li><a href="/emergencyservices/typesofemerg.php">&nbsp;Types of Emergencies</a></li>
                   <li><a href="/emergencyservices/whattoexpect.php">&nbsp;What to Expect On Arrival</a></li>
                   </ul>
            </li>
  • Pas besoin d'excuse pour les terribles code, mais plutôt pour le fait qu'il n'y a pas de tentative de création de la fondu lent... dans ce code. Qu'avez-vous essayé?
  • J'ai essayé d'utiliser quelque chose comme de la transition:les couleurs 1s ease-in-out 500ms, couleur d'arrière-plan 1s ease-in-out 500ms; -webkit-transition:couleur 1s ease-in-out 500ms, couleur d'arrière-plan 1s ease-in-out 500ms, Mais pour être honnête, c'est un nouveau territoire à moi. Je ne suis pas exactement sûr de ce que je suis à la recherche d'
InformationsquelleAutor MikeL | 2014-03-16
  1. 2

    Vous devez utiliser les Animations CSS3, bien qu'ils ne sont pas pris en charge dans tous les navigateurs tels que <=IE9, c'est exactement ce qu'ils ont fait pour. Vous pouvez essayer de jQuery pour les anciens navigateurs.

    Workign démo JSFiddle

    li:hover > ul {
    display: block;
    opacity: 0;
    z-index: 98;
    position: absolute;
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -moz-animation: fadein 2s; /* Firefox */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera */
    animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
    • A parfaitement fonctionné! Merci
    InformationsquelleAutor lshettyl