Javascript Mouseenter和Mouseleve下拉菜单

我试图让这个下拉菜单在鼠标悬停时显示子菜单，在子菜单顶部也保持悬停，但当鼠标离开时，我希望它隐藏它

在下面的链接中，我只能将javascript更改为mouseenter，但我不知道如何创建mouseleave函数

对于任何知道如何编码的人来说，这可能都非常容易，但我不：(

以下是链接：

代码如下：

document.querySelector('.mini-photo-wrapper').addEventListener('mouseenter', function() {
  document.querySelector('.menu-container').classList.toggle('active');
});

---

复制并粘贴此块，然后将显示

mouseenter

的位置更改为

mouseleave

唯一的问题是菜单没有保持不变，因此我无法选择它。如果没有一些代码显示您的问题，将无法调试您的问题。我猜，如果您使用codepen链接，则标记没有结构化我希望您将鼠标放在

.mini photo wrapper

内，因此当您

mouseleave

时，您将触发关闭事件。您需要为您想要的解决方案重写HTML