Как сделать чтобы dropdown выдавал не только список ссылок но и сам был ссылкой

Question

я бы хотел чтобы дропдаун не только выкидывал список ссылок на страницы но и сам при нажатии открывал страницу на которой будет этот список(у меня эта страница называется choose_subject.html но он работает только как выкидыватель списка ссылок, как исправить?

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="choose_subject.html" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" aria-controls="dropdown-menu">
                Выбрать предметы
                </a>
  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
    <li><a class="dropdown-item" href="choose_subject.html">Предмет1</a></li>
    <li><a class="dropdown-item" href="#">Предмет2</a></li>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li><a class="dropdown-item" href="#">Предмет3</a></li>
  </ul>
</li>

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="choose_subject.html" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" aria-controls="dropdown-menu">
                Выбрать предметы
                </a>
  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
    <li><a class="dropdown-item" href="choose_subject.html">Предмет1</a></li>
    <li><a class="dropdown-item" href="#">Предмет2</a></li>
    <li>
      <hr class="dropdown-divider">
    </li>
    <li><a class="dropdown-item" href="#">Предмет3</a></li>
  </ul>
</li>

Answer 1

Вот вам решение, но не думаю что это хорошая решение, так как для мобильных устроиств будет чложно открыть ваш дро-даун меню так как его всегда будет кидать на другую страницу ...

.dropmenu {
  width: fit-content;
  display: flex;
  flex-direction: column;
}

.dropdown-menu {
  display: none;
  flex-direction: column;
}

.dropmenu:hover .dropdown-menu {
  display: flex;
}

.drop-link {
  padding: 12px 24px;
  text-decoration: none;
  color: #000;
}

.dropdown-menu {
  box-shadow: 0 6px 8px 1px rgba(0, 0, 0, .2);
}

.dropdown-link {
  padding: 12px 24px;
  text-decoration: none;
  color: #000;
}

.drop-link:hover,
.dropdown-link:hover {
  color: #CC0000;
}

<div class="dropmenu">
  <a href="#" class="drop-link">First Link</a>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-link">Link 1</a>
    <a href="#" class="dropdown-link">Link 2</a>
    <a href="#" class="dropdown-link">Link 3</a>
    <a href="#" class="dropdown-link">Link 4</a>
    <a href="#" class="dropdown-link">Link 5</a>
  </div>
</div>

БЛОГ НА HUSL

Как сделать чтобы dropdown выдавал не только список ссылок но и сам был ссылкой

Ответы (1 шт):