Comment animer le menu déroulant d'opencart

Question

Donc, je travaille sur mon ecommerce avec opencart et je voulais faire apparaître le menu déroulant avec une animation, une simple. Le problème est que j'applique la transition, mais cela ne fonctionne pas. La partie de code est celui

.navbar-nav > li > .dropdown-menu { 
    margin-top: 0; 
    border-top-left-radius: 0; 
    border-top-right-radius: 0; 
    transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -webkit-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    -ms-transition: all 0.5s ease-in-out; 
} 

Je suis la version usign 2.2

Answer 1

Comme .dropdown-menu a display:none style bootstrap, vous ne pouvez pas l'animer avec css pur sans écraser, vous pouvez animer cette façon:

.navbar-nav > li > .dropdown-menu { 
    display: block; /* Override the bootstrap display: none */ 
    height: 0; 
    opacity: 0; 
    overflow: hidden; 
    transition: opacity 0.3s ease; 
    -webkit-transition: opacity 0.3s ease; 
    visibility: hidden; 
} 
#menu .dropdown:hover .dropdown-menu { 
    height: auto; 
    opacity: 1; 
    visibility: visible; 
} 

Un autre exemple:

.navbar-nav > li > .dropdown-menu { 
    display: block; /* Override the bootstrap display: none */ 
    height: 0; 
    opacity: 0; 
    overflow: hidden; 
    transition: all 0.5s ease; 
    -webkit-transition: all 0.5s ease; 
    visibility: hidden; 
    top: 200%; 
} 
#menu .dropdown:hover .dropdown-menu { 
    height: auto; 
    opacity: 1; 
    visibility: visible; 
    top: 100%; 
} 

note: ne modifiez pas les fichiers bootstrap, ajoutez le code ci-dessus à la fin de la feuille de style de votre thème: stylesheet.css