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

【问题标题】：How can I make my dropdown menus stay visible on hover?如何让我的下拉菜单在悬停时保持可见？
【发布时间】：2021-11-16 10:30:36
【问题描述】：

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

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

但是，我希望他们在悬停时工作。但是当我将它设置为以下时，一旦您将鼠标从菜单标题上移开，下拉菜单就会消失：

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

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

我可以进行哪些更改才能使其正常工作？

【问题讨论】：

标签： html css drop-down-menu menu dropdown

【解决方案1】：

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

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

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

【讨论】：

完美运行！谢谢！

【解决方案2】：

下拉菜单消失，因为您的 CSS 告诉它仅在您将鼠标悬停在 .link 上时显示，这是您的 about/product 链接

而不是这个：

.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;
}

谢谢你会修复它

【讨论】：