@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;
}


При ховере на определённый пункт меню открывается второй и третий уровень соответственно, как сделать так, чтобы при наведении курсора на другие части экрана меню не сворачивалось?
  • Вопрос задан
  • 137 просмотров
Пригласить эксперта
Ответы на вопрос 1
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель
CSS предполагает наличие контекста наведения, наводишь на элемент и можешь управлять состоянием его дочерних элементов. Если ты увел курсор с родительского компонента, то потерял контекст и правило стилей работать не будет. Чтобы решить проблему, используй JS и управляй состоянием без контекста привязки, вешая состояние на переменные.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы