0

Всем привет.

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

.header__nav-list-subparagraph {
  // display: flex;
  display: none;
  // padding-top: 50px;
  position: absolute;
  // top: 67px;
  left: 485px;
  flex-direction: column;
}

.header__nav-list-subparagraph-item-link {
  text-decoration: none;
  font-family: Raleway;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: #fff;
}

.header__nav-list-subparagraph-item {
  border-radius: 16px;
  background: #000;
  padding: 12px 16px;
  margin-bottom: 4px;
  // margin-top: 15px;
  position: relative;
}

.subparagraph {
  position: relative;
}

.subparagraph:hover+.header__nav-list-subparagraph {
  display: block;
}
<li class="header__nav-list-item"><a class="subparagraph header__nav-list-item-link" href="#">Не главная<img
    class="header__nav-list-item-link-arrow" src="img/icons/arrow.svg" width="8" height="16"
    alt="стрелка"></a>
    <ul class="header__nav-list-subparagraph">
        <li class="header__nav-list-subparagraph-item"><a class="header__nav-list-subparagraph-item-link" href="#">Ещё подпункт</a></li>
        <li class="header__nav-list-subparagraph-item"><a class="header__nav-list-subparagraph-item-link" href="#">Подпункт</a></li>
        <li class="header__nav-list-subparagraph-item"><a class="header__nav-list-subparagraph-item-link" href="#">И ещё один подпункт</a></li>
    </ul>
</li>

3
  • Что нужно исправить чтобы оно не пропадало?? Commented 5 окт. 2023 в 19:58
  • где-то Вы потеряли часть кода html... Commented 6 окт. 2023 в 5:01
  • И выпадающее меню у Вас далеко от основного улетает Commented 6 окт. 2023 в 6:42

1 ответ 1

1

.nav .dropdown:hover>.dropdown-menu {
  display: block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Меню</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>

<body>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Главная</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">О компании</a>
      <ul class="dropdown-menu">
        <li>
          <a class="dropdown-item" href="https://ru.wikipedia.org/wiki/%D0%97%D0%B0%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0">История</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">Сотрудники</a>
        </li>
        <li>
          <a class="dropdown-item" href="#">Наши партнеры</a>
        </li>
      </ul>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Галерея</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Контакты</a>
    </li>
  </ul>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>

</html>

Я бы верстала на bootstrap и немного поменяла бы css. Ссылочку одну реальную (не заглушку) я добавила (на историю), чтобы Вы поняли, что всё работает

* {
  margin: 0px;
  padding: 3px;
}

ul {
  list-style-type: none;
}

.navigation {
  height: 50px;
}

.navigation>ul>li {
  float: left;
  width: 200px;
  position: relative;
}

.navigation li a {
  display: block;
  text-decoration: none;
}

.navigation li .ddw {
  display: none;
  position: absolute;
  top: 100%;
}

.navigation li:hover .ddw {
  display: block;
}
<nav class="navigation">
  <ul>
    <li>
      <a href="#">Главная</a>
    </li>
    <li>
      <a href=#>О компании &#9660;</a>
      <ul class="ddw">
        <li><a href="https://ru.wikipedia.org/wiki/%D0%97%D0%B0%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0">История</a></li>
        <li><a href="#">Сотрудники</a></li>
        <li><a href="#">Наши партнеры</a></li>
      </ul>
    </li>
    <li><a href="#">Галерея</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

Ну или без bootstrap. В версии для пк такое точно будет работать

2
  • Дело в том что бутстрап нельзя применять) Commented 6 окт. 2023 в 7:46
  • @Александр, отредактировала ответ). Но, имейте ввиду, что для компьютерной версии - это норм, а вот для мобильной придется адаптировать безбутстраповскую версию Commented 6 окт. 2023 в 9:21

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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