Question

我需要放慢下拉菜单的打开速度，我尝试了几种不同的过渡效果，但没有一种能给出正确的解决方案，我的想法是在这一段中添加过渡效果：

/* Showing Drop Down on Mouse Hover */


.megamenu li:hover > div {
    display: block;
}

任何帮助都会很棒，您可以在此链接上查看菜单：

Live demo

Answer 1

您需要使用可见性而不是显示：

更改

.megamenu li:hover > div {
   display:block;
}

到

.megamenu li:hover > div {
   visibility:visible;
   opacity:1;
   transition-delay:0.2s;
}

并改变

.megamenu .dropdown_1column, 
.megamenu .dropdown_2columns, 
.megamenu .dropdown_2columns1, 
.megamenu .dropdown_3columns, 
.megamenu .dropdown_4columns,
.megamenu .dropdown_5columns,
.megamenu .dropdown_fullwidth {
    margin:0;
    display:none;
    position:absolute;
    top:41px;
    left:-1px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
 }

到

.megamenu .dropdown_1column, 
.megamenu .dropdown_2columns, 
.megamenu .dropdown_2columns1, 
.megamenu .dropdown_3columns, 
.megamenu .dropdown_4columns,
.megamenu .dropdown_5columns,
.megamenu .dropdown_fullwidth {
    margin:0;
    visibility:hidden;
    position:absolute;
    top:41px;
    left:-1px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
 }

对MegaMenu的CSS过渡效果

1 个答案: