我有一个包含子菜单的菜单。
#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/并将鼠标悬停在“الأخبار”下方以查看实际问题。
删除权:10%; left: auto;
内联 css 解决了这个问题,但改变了子菜单的方向
最佳答案
那是因为只有 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,我知道我可以帮助你更多。
关于html - 仅将鼠标悬停在父菜单项上时强制显示子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54888244/