Menu 1 - pure CSS
Menu 2 - using hover-intent
let showDelay = 300, hideDelay = 800;
let menuEnterTimer, menuLeaveTimer;
let allMenuItems = document.querySelectorAll('#menu2 .menu-item');
for (let i = 0; i < allMenuItems.length; i++) {
allMenuItems[i].addEventListener('mouseenter', function() {
let thisItem = this;
clearTimeout(menuLeaveTimer);
for (let j = 0; j < allMenuItems.length; j++) {
allMenuItems[j].classList.remove('active');
}
menuEnterTimer = setTimeout(function() {
thisItem.classList.add('active');
}, showDelay);
});
allMenuItems[i].addEventListener('mouseleave', function() {
let thisItem = this;
clearTimeout(menuEnterTimer);
menuLeaveTimer = setTimeout(function() {
thisItem.classList.remove('active');
}, hideDelay);
});
}