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

Question

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

 #menu-navigation>li:hover:before, #menu-navigation>li:hover:after, #menu-navigation>li.active:before, #menu-navigation>li.active:after { opacity: 1; filter: alpha(opacity=100); } .menu ul li ul { width: 230px; border-top: 3px solid; float: left; z-index: 2; position: absolute; 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; -moz-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; }

 <nav class="menu"> <ul id="menu-navigation"> <li> <a href="/">الصفحة الرئيسية</a> </li> <li> <a href="#">الأخبار</a> <ul class="nav nav-second-level" style="right: 10%; left: auto; top: 75%;"> <li> <a>التقارير الدورية</a> </li> <li> <a>الورش و الزيارات الميدانية</a> </li> </ul> </li> </ul> </nav>

问题是当鼠标悬停在子菜单区域时，不应该查看子菜单。

您可以参考https://rahmaunion.org/并将鼠标悬停在“الأخبار”下方以查看实际问题。

移除right: 10%; left: auto; right: 10%; left: auto; from inline css 修复了这个问题，但改变了子菜单方向

Answer 1

那是因为在子菜单消失时只有opacity是不够的。 它仅使其透明。 子菜单仍然保留在页面上并获得:hover事件。 您也应该将它与visiblity性属性混合并在transition使用它

例如;

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

我没有测试它，但我想它应该没问题，但如果你能提供一个简单的 jsfiddle 或 codepen，我知道我可以帮助你更多。