Как развернуть раскрывающееся меню opencart

Question

Итак, я работаю над своей электронной коммерцией с помощью opencart, и я хотел, чтобы выпадающее меню отображалось с анимацией, простой. Проблема в том, что я применяю переход, но он не работает. Код часть это один

.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; 
} 

Я usign версии 2,2

Answer 1

.dropdown-menu Как имеют display:none стиль в начальной загрузке, вы не можете оживить его с чистым CSS без переопределения, вы можете оживить его таким образом:

.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; 
} 

Другой пример:

.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%; 
} 

Примечание: не редактируйте загрузочные файлы, добавьте код выше в конце таблицы стилей вашей темы: stylesheet.css