CSS转变对MegaMenu的影响

Question

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

/* Showing Drop Down on Mouse Hover */


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

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

现场演示

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