html - MegaMenu 上的 CSS 过渡效果

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