2

Есть проблема с отображение выпадающего меню. При наведении на элемент «Меню», открывается подменю, которое закрывается, когда курсор покидает элемент «Меню».

Как это исправить?

Прикладываю пример - https://jsfiddle.net/nqzf50wo/1/

li {
  list-style-type: none
}

.nav {
  display: flex
}

.nav-item {
  margin-right: 30px
}

.nav-head {
  background: #333;
  color: #ccc;
  text-align: center;
  padding: 8px 0;
  width: 100px
}

.nav-submenu {
  background: #666;
  color: #ccc;
  padding: 5px;
  display: none
}

.nav-head:hover ~ .nav-submenu {
  display: block
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">

  <div class="nav-item">
    <div class="nav-head">Меню 1</div>
    <ul class="nav-submenu">
      <li>Подменю 1</li>
      <li>Подменю 2</li>
      <li>Подменю 3</li>
    </ul>
  </div>
  
  <div class="nav-item">
    <div class="nav-head">Меню 2</div>
    <ul class="nav-submenu">
      <li>Подменю 1</li>
      <li>Подменю 2</li>
      <li>Подменю 3</li>
    </ul>
  </div>
  
    <div class="nav-item">
    <div class="nav-head">Меню 3</div>
    <ul class="nav-submenu">
      <li>Подменю 1</li>
      <li>Подменю 2</li>
      <li>Подменю 3</li>
    </ul>
  </div>

</div>

1
  • используйте js для этого
    – Inventor
    5 мая 2021 в 12:19

1 ответ 1

1

Ваше решение - при наведении на родительский элемент показываем дочерний:

.nav-item:hover .nav-submenu {}

li {
  list-style-type: none
}

.nav {
  display: flex
}

.nav-item {
  margin-right: 30px
}

.nav-head {
  background: #333;
  color: #ccc;
  text-align: center;
  padding: 8px 0;
  width: 100px
}

.nav-submenu {
  background: #666;
  color: #ccc;
  margin: 1px 0;
  padding: 5px;
  display: none
}

.nav-item:hover .nav-submenu {
  display: block
}
<div class="nav">

  <div class="nav-item">
    <div class="nav-head">Меню 1</div>
    <ul class="nav-submenu">
      <li>Подменю 1</li>
      <li>Подменю 2</li>
      <li>Подменю 3</li>
    </ul>
  </div>

  <div class="nav-item">
    <div class="nav-head">Меню 2</div>
    <ul class="nav-submenu">
      <li>Подменю 1</li>
      <li>Подменю 2</li>
      <li>Подменю 3</li>
    </ul>
  </div>

  <div class="nav-item">
    <div class="nav-head">Меню 3</div>
    <ul class="nav-submenu">
      <li>Подменю 1</li>
      <li>Подменю 2</li>
      <li>Подменю 3</li>
    </ul>
  </div>

</div>

Можно добавить легкую анимацию. Пример:

li {
  list-style-type: none
}

.nav {
  display: flex
}

.nav-item {
  margin-right: 30px
}

.nav-head {
  background: #333;
  color: #ccc;
  text-align: center;
  padding: 8px 0;
  width: 100px
}

.nav-submenu {
  background: #666;
  color: #ccc;
  margin: 1px 0;
  padding: 5px;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.3s;
}

.nav-item:hover .nav-submenu {
  transform: scaleY(1);
}
<div class="nav">

  <div class="nav-item">
    <div class="nav-head">Меню 1</div>
    <ul class="nav-submenu">
      <li>Подменю 1</li>
      <li>Подменю 2</li>
      <li>Подменю 3</li>
    </ul>
  </div>

  <div class="nav-item">
    <div class="nav-head">Меню 2</div>
    <ul class="nav-submenu">
      <li>Подменю 1</li>
      <li>Подменю 2</li>
      <li>Подменю 3</li>
    </ul>
  </div>

  <div class="nav-item">
    <div class="nav-head">Меню 3</div>
    <ul class="nav-submenu">
      <li>Подменю 1</li>
      <li>Подменю 2</li>
      <li>Подменю 3</li>
    </ul>
  </div>

</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.