菜单li连接设计java_在菜单li hover上，子菜单弹出而不是淡入

我的导航栏是一个小问题 . 当我将鼠标悬停在其中一个父元素上时，子元素ul元素(下拉菜单)突然弹出 . 当我将它悬停时，它就会消失(淡出) .

这是HTML结构的示例：

• Parent
  • Link A
  • Link B
  • Link C

这是SCSS：

@mixin transition($target, $time) {

-webkit-transition: $target $time ease-in-out;

transition: $target $time ease-in-out;

}

header#masthead .main-menu ul > li:not(.wdac-active) > ul.sub-menu {

display: none;

}

header#masthead .main-menu ul > li > ul.sub-menu {

opacity: 0;

@include transition(opacity, 0.6s);

}

header#masthead .main-menu ul > li:hover > ul.sub-menu,

header#masthead .main-menu ul > li:focus > ul.sub-menu {

opacity: 1;

@include transition(opacity, 0.6s);

display: block;

}

header#masthead .main-menu ul > li.wdac-active > ul.sub-menu {

display: block;

}

在0.6s之后为其添加.wdac-active类的jQuery如下：

$("#masthead ul.menu > li").on("hover", function() {

var $menuItem = $(this);

setTimeout(function() {

$menuItem.toggleClass("wdac-active");

}, 600);

});

所以我想要发生的是，在悬停时，ul被设置为阻塞并慢慢淡入，然后应用wdac-active类 . 在m离开li之后，ul逐渐消失，一旦移除了wdac-active类，它就被设置为display：none .

谁能告诉我这里做错了什么？淡入是突然的(不好)，但淡出效果很好 .