Html 即使您没有'；不要将鼠标放在下拉菜单上

我刚刚创建了一个带有下拉菜单的按钮，您可以查看演示

在演示中，我向

购物车包装器
元素添加了一个黑色背景，以便您可以看到问题所在

问题是，当您将鼠标悬停在按钮上时，您可以将鼠标保持在黑色背景上，并且下拉菜单仍然可见

我只希望当您将鼠标悬停在按钮上或将鼠标保持在下拉菜单上时，下拉菜单可见

以下是我的代码：

HTML:

发生什么事
这里的问题其实不是什么问题，因为一切都在按预期进行。将鼠标悬停在容器上时，子容器可见。然后子对象可见，父对象变大以包围它

电流选择器：

要解决这个问题，您有两个选择。最简单的方法是使用同级选择器而不是父级选择器。选择
.shopping cart wrapper
内的
a
而不是
.shopping cart wrapper
本身，并使用
+
同级选择器

不过，我们必须小心，因为我们希望当鼠标悬停在孩子身上时，孩子保持可见。当使用父对象作为选择器时，这是自动的。对于兄弟姐妹，我们必须手动执行此操作。我们将使用兄弟姐妹和孩子本身作为选择器

代码

当前：

.shopping-cart-wrapper:hover .shopping-cart-dropdown {
  opacity: 1;
  display: block;
}

工作：

.shopping-cart-wrapper a:hover + .shopping-cart-dropdown,
.shopping-cart-dropdown:hover {
  opacity: 1;
  display: block;
}

进一步资料
您是否需要隐藏/可见子菜单具有比顶部菜单更大的特定设置宽度？是的，我需要，因为当您将产品添加到购物车时，购物车的宽度将与顶部菜单不同，因此我希望它的宽度比顶部菜单大。子菜单可以与右侧的按钮对齐，但在左侧我希望它更大。好的，那么我的答案会解决它。我现在可以看到一个问题。如果您将鼠标悬停在按钮上方，并将鼠标放在下拉菜单上，它将消失。我希望当你把鼠标悬停在伊藤上时，下拉菜单是可见的。抢手货我已经修改了。
.shopping-cart-wrapper:hover .shopping-cart-dropdown {
  opacity: 1;
  display: block;
}

.shopping-cart-wrapper a:hover + .shopping-cart-dropdown,
.shopping-cart-dropdown:hover {
  opacity: 1;
  display: block;
}