Transition sur Menu [Fermé]

Signaler
Messages postés
1090
Date d'inscription
jeudi 13 septembre 2012
Statut
Membre
Dernière intervention
7 mars 2020
-
Bonjour,

Je souhaite faire une transition sur mon menu déroulant mais peu importe ou je mets ma transition, cela ne fonctionne pas.

Ce que je recherche, c'est un effet déroulant au survol avec transition: 0.5s par exemple.

Si vous pouviez me mettre sur la voie, je vous en serait très reconnaissant.

Je vous remercie de vore aide.

Mon HML:
<li class="drop"><i class="fa fa-book" aria-hidden="true"></i><a <?php echo $catalogueON;?> href="index.php?page=catalogue">Catalogue</a>
    <ul class="sous-menu">
        <li><a href="#">Renault</a></li>
        <li><a href="#">Peugeot</a></li>
        <li><a href="#">Citroën</a></li>
        <li><a href="#">Volkswagens</a></li>
    </ul>
</li>

Mon CSS:
.drop {
    position: relative;
}
.drop:hover .sous-menu{
    display: block;
}
 
.sous-menu {
    position: absolute;
    width: 220px !important;
    top: 50px;
    left: 0px;
    padding: 0;
    display: none;
}
.sous-menu li {
    display: block;
    width: 220px !important;
    padding: 15px;
    background : #e53935;
    background-image:-webkit-linear-gradient(#e53935, #b71c1c);
    background-image:linear-gradient(#e53935, #b71c1c);
    border-bottom: 1px solid #777;
}
.sous-menu li:nth-child(4) {
    border-radius: 0 0 10px 10px;
    }
.sous-menu li a{
    color: #fff;
    font-size: 0.8em;
    display: block;
    text-align: left;
    width: 130px !important;
    font-size: 1em;
}
.sous-menu li a:hover{
    color: #009FCC;
}