Как исправить ошибку с выпадающем меню?

Всем привет, как исправить ошибку c перескакиванием выпадающего меню. Сама ошибка происходит на сайте https://y-skills.com Ссылку на код прикладываю Codepen Без js происходит тоже самое.

.submenu {
  position: absolute;
  top: 7rem;
  padding-top: 2.7rem;
  padding-bottom: 2.1rem;
  box-sizing: border-box;
  display: none;
}

.submenu__item {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2.4rem;
  margin-bottom: 1.6rem;
  color: #000000;
  display: block;
  padding-right: 4.3rem;
}

 .submenu__item:hover {
   color: #259EAE;
 }

 .has-submenu .hover .submenu__item {
   background: url("./../icon/arrow-grey-light.svg") no-repeat 100% center;
 }

 .subsubmenu {
   position: absolute;
   left: 100%;
   top: -100%;
   display: grid;
   grid-template-columns: repeat(3,1fr);
   padding-top: 3.1rem;
   padding-left: 3.4rem;
   box-sizing: border-box;
   opacity: 0;
 }

 .subsubmenu__item {
   margin-bottom: 2.4rem;
   margin-right: 2.4rem;
   width: 70%;
  }

 .subsubmenu__item:hover {
   transition: 0.5s linear;
   color: #259EAE;
  }

 .hover:hover .subsubmenu {
   top: 0;
   opacity: 1;
   transition: top 0.3s linear;
  }

  .menu-background {
    width: 100vw;
    position: absolute;
    background: #fff;
    display: none;
  }

Ответы (1 шт):

Автор решения: Павел Гуров

Решение проблемы visibility: hidden;

→ Ссылка