如何动画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