子菜单上 hover 的延迟

Question

我希望能够在 cursor 悬停时显示一个子菜单，但是一旦鼠标悬停在任何链接上，子菜单就会关闭。

这是代码

HTML

<div class="body">
    <div class="menu">HOVER HERE</div>
    <ul class="drop-down">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    </ul>
</div>

CSS

.body {
  width: 400px;
  margin: 0 auto;
  margin-top: 30vh;
  font-family: Lato, sans-serif;
}
.menu {
  display:block;
  border: 1px solid #000;
  width: 150px;
  background: #000;
  color:#FFF;
  padding: 15px;
  text-align:center;
}
ul li {
  border: 1px solid #000;
  width: 150px;
  padding: 15px;
  list-style:none;
  text-align:center;
}
ul {
  margin: 0;
  padding: 0;
}
.drop-down {
  display:none;

}
.open {
  display:block;
}

JavaScript

document.addEventListener('DOMContentLoaded', function () {
    var dropdownItem = document.querySelector('.menu');
    var dropdown = document.querySelector('.drop-down');

    dropdownItem.addEventListener('mouseenter', function (e) {
        dropdown.classList.add('open');
    });
    dropdownItem.addEventListener('mouseleave', function () {
        dropdown.classList.remove('open');
    })
})

Codepen 在这里

https://codepen.io/Kenneman/pen/yLLPmeX

Answer 1

这个问题已经在 SO 上解决了一千次，几乎每个纯 CSS 菜单都展示了它是如何完成的。 子菜单必须在悬停的元素内。 不需要 JavaScript：

.menu:hover ul {
    display: block;
}

演示

您必须摆弄样式才能修复子菜单背景，但这就是想法。