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

从嵌入式CSS中删除right: 10%; left: auto;可以解决此问题，但可以更改子菜单方向

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，我知道我可以为您提供更多帮助。

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

1 个答案: