JAVASCRIPT

nav hover add class and remove using javascript smooth

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