Html 仅在父菜单项上悬停时显示强制子菜单

我有一个包含子菜单的菜单

#菜单导航>li:悬停：之前，
#菜单导航>li:悬停：之后，
#菜单导航>li.活动：之前，
#菜单导航>li.活动：之后{
不透明度：1；
过滤器：α（不透明度=100）；
}
.菜单{
宽度：230px；
边框顶部：3倍实心；
浮动：左；
z指数：2；
位置：绝对位置；
左：-9999px；
顶部：92px；
不透明度：0；
过滤器：alpha（不透明度=0）；
-webkit边界半径：4px；
-moz边界半径：4px；
-ms边界半径：4px；
-o-边界半径：4px；
边界半径：4px；
-webkit转换：不透明度0.3s到0.0s；
-moz过渡：不透明度0.3s到0.0s；
-ms转换：不透明度0.3s到0.0s；
-o-过渡：不透明度0.3s-0s；
过渡：不透明度0.3s到0.0s；
}

التقارير الدورية


الورش و الزيارات الميدانية

这是因为在消失子菜单时，仅

不透明度是不够的。它只使它透明。子菜单仍保留在页面上，并获取
：hover
事件。您还应该将它与
visiblity
属性混合使用，并在
转换中使用它

比如,

#menu-navigation > li:hover:before, #menu-navigation > li:hover:after, #menu-navigation > li.active:before, #menu-navigation > li.active:after {
    opacity: 1;
    visibility: visible;
    filter: alpha(opacity=100);
}

.menu ul li ul {
    width: 230px;
    border-top: 3px solid;
    float: left;
    z-index: 2;
    position: absolute;
    visibility: hidden;
    left: -9999px;
    top: 92px;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s;
    -moz-transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s;
    -ms-transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s;
    -o-transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s;
    transition: opacity 0.3s ease 0, visibility 0.3s ease 0ss;
}

我没有测试它，但我想它应该可以，但如果您可以提供一个简单的JSFIDLE或codepen，我知道我可以帮助您更多