Javascript 悬停在子菜单上的延迟

我想一个子菜单能够显示时，光标悬停在，但在这一刻，子菜单是关闭的，一旦鼠标悬停在任何链接

这是密码

HTML

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来了

---

这个问题已经解决了上千次，而且几乎每个仅CSS的菜单都演示了它是如何完成的。子菜单必须位于悬停元素的内部。不需要JavaScript：

.menu:hover ul {
    display: block;
}

你将不得不摆弄样式来修复子菜单的背景，但这就是想法

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');
    })
})

.menu:hover ul {
    display: block;
}