html - 仅将鼠标悬停在父菜单项上时强制显示子菜单

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/并将鼠标悬停在“الأخبار”下方以查看实际问题。

删除权:10%； left: auto; 内联 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，我知道我可以帮助你更多。