Как сделать, чтобы меню не закрывалось при наведении на другую часть экрана?

Question

[Axiniya]

Привет! Существует меню с такой структурой:

<nav>
  <div class="main-menu">
    <ul class="menu-main-menu">
      <li class="menu-parent-item">
        <a href="#">Пункт меню 1 ▶</a>
        <div class="menu-lvl-2">
          <ul class="lvl-2">
            <li class="menu-child-item">
              <a href="#">Подпункт меню 1 ▶</a>
              <div class="menu-lvl-3">
                <ul class="lvl-3">
                  <li><a href="#">Подподпункт меню 1</a></li>
                  <li><a href="#">Подподпункт меню 2</a></li>
                  <li><a href="#">Подподпункт меню 3</a></li>
                </ul>
              </div>
            </li>
            <li><a href="#">Подпункт 2</a></li>
            <li><a href="#">Подпункт 3</a></li>
          </ul>
        </div>
      </li>
      <li><a href="#">Пункт меню 2</a></li>
      <li><a href="#">Пункт меню 3</a></li>
    </ul>
  </div>
</nav>

.main-menu li, a {
  text-decoration: none;
  list-style: none;
  color: black;
}

.main-menu .menu-main-menu {
    position: fixed;
    width: 200px;
    top: 0;
    height: 100%;
    background: gray;
    margin: 0;
    padding: 0;
}

.menu-lvl-2 .lvl-2 {
    display: none;
    position: fixed;
    width: 200px;
    left: 200px;
    top: 0;
    list-style: none;
    height: 100%;
    background: darkgray;
    padding: 0;
}

.menu-lvl-3 .lvl-3 {
    display: none;
    position: fixed;
    width: 200px;
    left: 400px;
    top: 0;
    list-style: none;
    height: 100%;
    background: lightgray;
    padding: 0;
}

.menu-parent-item:hover > .menu-lvl-2 .lvl-2 {
    display: block;
}

.lvl-2 .menu-child-item:hover > .menu-lvl-3 .lvl-3 {
    display: block;
}

При ховере на определённый пункт меню открывается второй и третий уровень соответственно, как сделать так, чтобы при наведении курсора на другие части экрана меню не сворачивалось?

Comments

[Александр Васильев]

а каким образом в таком случае можно будет свернуть меню ?

[Ankhena]

Открывать его на JS.
Предварительно придумав, как оно будет закрываться.
Причем так, чтобы пользователю такое поведение было знакомо и понятно.

[Axiniya]

Александр Васильев, дело в том, что это просто структура, на самом сайте бургер-меню на JQuery, и там присутствует кнопка для закрытия меню, которая меняет положение в зависимости от того, какой уровень меню сейчас отображается, и еще при клике на оверлей меню тоже закрывается.

[Сергей Сергей]

Писать не через hover, а через mouseover.

[Александр Васильев]

Axiniya, ну, если все закрывается и есть логика, в таком случае можно вот так жестко поступить ))

[Axiniya]

Александр Васильев, поняла, попробую бефор добавить) спасибо

Answer 1

[Арсений Матыцин]

CSS предполагает наличие контекста наведения, наводишь на элемент и можешь управлять состоянием его дочерних элементов. Если ты увел курсор с родительского компонента, то потерял контекст и правило стилей работать не будет. Чтобы решить проблему, используй JS и управляй состоянием без контекста привязки, вешая состояние на переменные.