如何让我的下拉菜单在悬停时保持可见？

Question

我不确定为什么，但是当我将鼠标悬停在下拉菜单上时，它们拒绝停留在屏幕上。当我使用 CSS 中的 :focus 使它们可点击时，它们工作正常：

.dropdown > .link:focus + .dropdown-menu

但是，我希望他们在悬停时工作。但是当我将其设置为以下内容时，只要您将鼠标从菜单中移开，下拉菜单就会消失 header:

.dropdown > .link:hover + .dropdown-menu

这是 JSFiddle 上的代码 ---> https://jsfiddle.net/L8u96pbr/

我可以做些什么来让它工作？

Answer 1

您的下拉菜单消失了，因为当您将光标从 class link 移动到 class dropdown-menu 的下一个同级时，它会取消悬停 link，导致下拉菜单消失。要解决此问题，您可以向 link 添加填充，如果您希望它占用相同数量的 space，则可以向填充添加等值的负边距（例如添加 .link { padding: 10px; margin: -10px; }).

此外，您的选择器 .dropdown > .link:hover + .dropdown-menu 仅在悬停 class link 时影响 class dropdown-menu。您希望在悬停 class dropdown-menu 时保持相同的效果，因此也添加 .dropdown-menu:hover。

.dropdown > .link:hover + .dropdown-menu,
.dropdown-menu:hover {
    opacity: 1; 
    transform: translateY(0px);
    pointer-events: auto;
}

Answer 2

下拉菜单消失了，因为你的 CSS 告诉它只有当你将鼠标悬停在 .link 上时才会显示，这是你的 about/product link

而不是这个：

.dropdown > .link:hover + .dropdown-menu {
opacity: 1;
transform: translateY(0px);
pointer-events: auto;
}

这样做：

.dropdown:hover .dropdown-menu {
opacity: 1;
transform: translateY(0px);
pointer-events: auto;
}

谢谢你会解决它

如何让我的下拉菜单在悬停时保持可见？

How can I make my dropdown menus stay visible on hover?

html

css

menu

drop-down-menu

dropdown