鼠标悬停时，下拉菜单消失

Question

我为我的网站制作了测试页

Demo Link

每当我将鼠标悬停在它上面时，此处的下拉菜单就会消失。

我已经看过并试过了论坛中已经提到的各种解决方案，但似乎没有任何帮助纠正它。 请帮忙，我想解决这个问题。

Answer 1

您需要在css中进行以下更改。对li进行悬停效果。您还需要设置position的{​​{1}}和z-index才能正常使用下拉菜单

header-top

Answer 2

尝试更改

/*Display the dropdown on hover*/
 nav#nav-main ul li a:hover + .hidden, .hidden:hover {
display: block;
}

到

/*Display the dropdown on hover*/
   nav#nav-main ul li:hover ul{
   display: block;
}

Answer 3

这是菜单的结构：

<li>
  <a href="#">About ￬</a>
  <ul class="hidden">
    <li><a href="#">Who We Are</a></li>
    <li><a href="#">What We Do</a></li>
  </ul>
</li>

并且使用此css规则显示子菜单

nav#nav-main ul li a:hover + .hidden, .hidden:hover { display: block; }

表示当您悬停链接时，会显示子菜单。但是当您将鼠标移动到子菜单时，您不再在链接上，因此再次隐藏子菜单。您必须更改css规则，以便在您将整个菜单li悬停时显示菜单，您就可以了：

nav#nav-main ul li:hover .hidden { display: block; }