Как правильно сделать такое подменю?

Question

[12Vadim12]

Как у меня вышло

Как должно быть

Проблема в том что при наведение на элемент li в навигации у меня появляется подменю, но если хочу навести на это подменю курсор оно исчезает из-за mouseout. Как реализовать пока не пойму

<li class="header__li header__li-special one-test"><a href="#">Материалы 
                  <i class="fa fa-sort-asc four__header-li" aria-hidden="true"></i>
                </a>
                <div class="header__li-subtext one-test">
                  <div class="header__li-subtext1">Блог</div>
                  <div class="header__li-subtext1">Вебинары</div>
                </div>
              </li>

.four__header-li.active{
  top:5px;
  transform: rotate(180deg);
 }
.header__li-subtext{
  background-color: #fff;
  display: none;
  border-radius: 10px;
  position: absolute;
  text-align: center;
  left: -35px;
  top:30px;
  padding: 15px 20px;
  &.active{
    display: block;
  }
  &:hover{
    box-shadow: 0px 2px 20px rgba(130, 145, 159, 0.2);
  }
}
.header__li-subtext1{
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: .02em;
  width: 140px;
  &:hover{
    font-weight: 600;
    color:#7872B9;
    cursor: pointer;
  }
}

document.querySelector('.header__li-special').addEventListener('mouseover', function(){
  document.querySelector('.four__header-li').classList.toggle('active');
  document.querySelector('.header__li-subtext').classList.toggle('active');
})
document.querySelector('.header__li-special').addEventListener('mouseout', function(){
  document.querySelector('.four__header-li').classList.remove('active');
  document.querySelector('.header__li-subtext').classList.remove('active');
})

Comments

[Froggyweb]

<div class="header__li-subtext1">Блог</div>
:( это же ссылка
такой js не особо нужен. Это решается на уровне СSS. другое дело тачэкраны, но mouseover у них нет. посмотри примеры меню их тьма.
курсор попадает в пустое пространство между материалами и выпадающим блоком.

[szQocks]

в одной обертке подменю и пункт меню должны быть и на обёртку ховер

<li> // При ховере на этот li показываем подменю
        <a>text link</a>
        <ul>
          <li>
            <a>submenu link</a>
          </li>
        </ul>
</li>

[Максим]

Answer 1

[Сергей delphinpro]

Поменяйте пару событий mouseover/mouseout на mouseenter/mouseleave

Comments

[12Vadim12]

результат получается схожий что mouseover/mouseout, когда курсор попадает в пустое пространство .

[Сергей delphinpro]

12Vadim12, если успеть переместить мышь на подменю, то оно не исчезнет.
Нужно всего лишь реализовать задержку

const menuitem = document.querySelector('.header__li-special');
let timeout;

menuitem.addEventListener('mouseenter', function(){
  clearTimeout(timeout);
  document.querySelector('.four__header-li').classList.toggle('active');
  document.querySelector('.header__li-subtext').classList.toggle('active');
})
menuitem.addEventListener('mouseleave', function(){
  timeout = setTimeout(() => {
    document.querySelector('.four__header-li').classList.remove('active');
    document.querySelector('.header__li-subtext').classList.remove('active');
  }, 300);
})

[12Vadim12]

спасибо за вариант с задержкой)