巨型菜单悬停事件触发了“偶然的”

Question

我想修复不久前建造的巨型菜单。为了构建它，我使用了纯CSS，因为我不知道JS。即使在手机或平板电脑上，我也能够找到并解决此菜单几乎所有问题，但是仍然有一个令人讨厌的问题，我无法独自解决。

当用户徘徊在Mega菜单中的主要类别时，较低级别显示，则还有另一个菜单，也触发事件触发。问题是，当用户尝试进入最直接和直线上的链接何时放置在较低级别菜单中的左侧或右侧的链接时。有时，其他菜单是通过徘徊在其他主要类别的情况下触发的。

我试图使Main Div触发悬停事件更大，但是布局非常丑陋，菜单对象彼此之间相距甚远。

我可以单击作为事件，但后来我松开了主链接。另外，我读到，我将不得不为所有主要链接编写许多自定义CSS，这些链接将使用“复选框”。不是最优雅的方式。无论如何，我都写了通往许多CSS的方式，我的代码中已经有一个纯粹的“ DIV和CSS-INCEPTION”：/

理想解决方案是使用某种延迟，这会触发较低的水平，在说500ms之后。我使用CSS尝试了一下，但是它仍然关闭一个，以无效打开其他用户偶然触发的。

也许最好是在JS中添加某种规则，只有当用户徘徊在链接上，例如500ms，才会触发菜单。然后，如果用户直接进入较低级别的相反方向的项目，他不会触发其他菜单“规则500ms”。没有实现。有可能吗？

到该网站

链接

/* 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%;
}

感谢所有的帮助。