Mega Menu hover event triggered "accidentally"

Question

I would like to fix my mega menu that I builded a while ago. To build it i used pure css, coz I dont know JS. I was able to find and solve almost all problems with this menu, even on mobile or tablets, but there is still one annoying problem that I cannot solve alone.

When user hovers over main category in mega menu, lower level is showing, then there is another level of menu, also triggered by hover event. Problem is when user tries to go in most direct and straight line to links placed far on the left or right in the lower level menu. Then sometimes other menus are triggered by hovering over other main categories.

I tried to make main div that triggers hover event bigger, but then layout is very ugly, and menu objects are way to far from each other.

I could make click as event, but then i loose main links. Also, I read that I would have to write a lot of custom CSS for all main links, that will use "checkbox". Not the most elegant way. I wrote way to much CSS anyway, there's already a pure "DIV and CSS-inception" in my code :/

Ideal solution would be to use some kind of delay, that would trigger lower levels after lets say 500ms. I tried that with CSS, but its still closing one to immidietlly open other that user just triggered by accident.

Maybe better would be to add some kind of rule in JS that menu will be triggered only if user will hover over link for example for 500ms.? Then if user would go straight to items placed in opposite directions in lower levels, he would not trigger other menus coz "rule 500ms." was not fulfilled. Is it even possible?

Link to the website

I attach my "inception" code just for you guys to laugh :)

/* Main Menu - hover underline */

.menu-item-style {
transition: 0.3s;
}
    
.mega-menu-main-item:hover .menu-item-style{
  color: #8f214b;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 40%;
  transform: scale(1.15);
}


/* Main Menu */

.sub-mega-menu-container1 {
  opacity: 0 !important;
  pointer-events: none;
  width: 99.2vw;
  left: -19.65vw;
}

    @media (max-width: 1366px){
    .sub-mega-menu-container1{
    width: 100vw;
    left: -21.1vw !important;
    }}


.mega-menu-parent-item1:hover .sub-mega-menu-container1 {
  opacity: 1 !important;
  pointer-events: auto;
  top: 100%;
}
    
.sub-mega-menu-container2 {
  opacity: 0;
  pointer-events: none;
  width: 99.2vw;
  left: -28vw;
}

    @media (max-width: 1366px){
    .sub-mega-menu-container2{
    width: 100vw;
    left: -30.75vw;
    }}

.mega-menu-parent-item2:hover .sub-mega-menu-container2 {
  opacity: 1;
  pointer-events: auto;
  top: 100%;
}

.sub-mega-menu-container3 {
  opacity: 0;
  pointer-events: none;
  width: 99.2vw;
  left: -36.37vw;
}

    @media (max-width: 1366px){
    .sub-mega-menu-container3{
    width: 100vw;
    left: -40.35vw;
    }}

.mega-menu-parent-item3:hover .sub-mega-menu-container3 {
  opacity: 1;
  pointer-events: auto;
  top: 100%;
}

.sub-mega-menu-container4 {
  opacity: 0;
  pointer-events: none;
  width: 99.2vw;
  left: -44.70vw;
}

    @media (max-width: 1366px){
    .sub-mega-menu-container4{
    width: 100vw;
    left: -50.05vw;
    }}

.mega-menu-parent-item4:hover .sub-mega-menu-container4 {
  opacity: 1;
  pointer-events: auto;
  top: 100%;
}

.sub-mega-menu-container5 {
  opacity: 0;
  pointer-events: none;
  width: 99.2vw;
  left: -53.05vw;
}

    @media (max-width: 1366px){
    .sub-mega-menu-container5{
    width: 100vw;
    left: -59.6vw;
    }}

.mega-menu-parent-item5:hover .sub-mega-menu-container5 {
  opacity: 1;
  pointer-events: auto;
  top: 100%;
}


/* Sub Menu - Products */

.big-sub-menu-container1 {
  opacity: 0;
  pointer-events: none;
  left: 0;
  text-shadow: none !important;
}

.big-menu-parent-item1:hover .big-sub-menu-container1 {
  opacity: 1;
  pointer-events: auto;
  top: 100%;
}
    
.big-sub-menu-container2 {
  opacity: 0;
  pointer-events: none;
  left: -100%;
  text-shadow: none !important;
}

.big-menu-parent-item2:hover .big-sub-menu-container2 {
  opacity: 1;
  pointer-events: auto;
  top: 100%;
}

.big-sub-menu-container3 {
  opacity: 0;
  pointer-events: none;
  left: -200%;
  text-shadow: none !important;
}

.big-menu-parent-item3:hover .big-sub-menu-container3 {
  opacity: 1;
  pointer-events: auto;
  top: 100%;
}

I appreciate all the help.