Nav Hover добавьте класс и удалите с помощью javaScript гладкого
<script>
const megaMenuShow = document.querySelectorAll('.top-menu-nav-a');
let megaMenuSH = document.querySelector('.megaMenu');
// nav hover show menu
megaMenuShow.forEach( cc=> {
cc.addEventListener('mouseover', function(e){
let data_mega = cc.getAttribute('data-mega');
let currentMenu = document.querySelector(`.${cc.getAttribute('data-mega')}`);
if(currentMenu != null){
const menuHide = document.querySelectorAll('.megaMenu');
menuHide.forEach( cc => cc.classList.remove('megaMenuShowHide'));
e.preventDefault();
currentMenu.classList.add('megaMenuShowHide');
megaMenuOver(data_mega);
}
});
cc.addEventListener('mouseout', function(e){
const menuHide = document.querySelectorAll('.megaMenu');
menuHide.forEach( cc => cc.classList.remove('megaMenuShowHide'));
});
});
function megaMenuOver(data_mega){
let megaMenuSHide = document.querySelector(`.megaMenu.${data_mega}`);
megaMenuSHide.addEventListener('mouseout',function(e){
megaMenuSHide.classList.remove('megaMenuShowHide');
});
megaMenuSHide.addEventListener('mouseover',function(e){
megaMenuSHide.classList.add('megaMenuShowHide');
});
}
</script>
Breakable Bat