Как сделать так чтобы mouseleave не распространялся на элемент .menu?
let link = document.querySelector('.link');
let dropMenu = document.querySelector('.drop-menu');
link.addEventListener("mouseenter", function () {
setTimeout(() => {
dropMenu.classList.remove('dn');
}, 500);
});
link.addEventListener("mouseleave", function () {
dropMenu.classList.add('dn');
});
.wrapper {
position: relative;
}
.drop-menu {
position: absolute;
width: 100%;
max-width: 400px;
background: blue;
top: 60px;
}
.dn {
display: none;
}
.menu {
display: flex;
flex-direction: row;
list-style: none;
padding: 0;
border: 1px solid #000;
max-width: 500px;
}
.menu a {
padding: 10px
}
<div class="container">
<div class="wrapper">
<a href="/" class="link">Каталог</a>
<div class="drop-menu dn">
<ul>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ul>
</div>
</div>
<div class="menu">
<a href="/">О компании</a>
<a href="/">Доставка</a>
<a href="/">Контакты</a>
</div>
</div>