Почему мое выпадающее меню позволяет мне щелкнуть первый элемент меню?

Question

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

Вот изображения того, как это выглядит для разных предметов:

Оба они указывают на соответствующие страницы, но гиперссылка работает только на первый элемент. Я что-то упустил?

Вот фрагмент моего кода:

<li class="nav-item">
  <div class="dropdown">
      <a href="#"
         class="nav-link dropdown-toggle a-btn ltc-gold-web-golden"
         data-toggle="dropdown" aria-expanded="false">Characters</a>
      <ul class="dropdown-menu" role="menu">
          <li class="nav-item">
              <a href="ron.html"
                 class="nav-link a-btn ltc-gold-web-golden">Ron</a>
          </li>
          <li class="nav-item">
              <a href="fatima.html"
                 class="nav-link a-btn ltc-gold-web-golden">Fatima</a>
          </li>
          <li class="nav-item">
              <a href="kandice.html" class="nav-link a-btn ltc-gold-web-golden">Kandice</a>
          </li>
          <li class="nav-item">
              <a href="ricky.html"
                 class="nav-link a-btn ltc-gold-web-golden">Ricky</a>
          </li>
          <li class="nav-item">
              <a href="rob.html" class="nav-link a-btn ltc-gold-web-golden">Rob</a>
          </li>
      </ul>
  </div>
</li>

Answer 1

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

z-index - это свойство, которое определяет z-порядок элемента и его потомков. Когда элементы перекрываются, z-порядок определяет, какой из них покрывает другой. Элемент с большим z-индексом обычно покрывает элемент с более низким индексом.

из вышеприведенного объяснения дайте z-index: 1; вашему главному родительскому div.

в этом примере родительский элемент li.nav-item.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<li class="nav-item">
  <div class="dropdown">
      <a href="#"
         class="nav-link dropdown-toggle a-btn ltc-gold-web-golden"
         data-toggle="dropdown" aria-expanded="false">Characters</a>
      <ul class="dropdown-menu" role="menu">
          <li class="nav-item">
              <a href="ron.html"
                 class="nav-link a-btn ltc-gold-web-golden">Ron</a>
          </li>
          <li class="nav-item">
              <a href="fatima.html"
                 class="nav-link a-btn ltc-gold-web-golden">Fatima</a>
          </li>
          <li class="nav-item">
              <a href="kandice.html" class="nav-link a-btn ltc-gold-web-golden">Kandice</a>
          </li>
          <li class="nav-item">
              <a href="ricky.html"
                 class="nav-link a-btn ltc-gold-web-golden">Ricky</a>
          </li>
          <li class="nav-item">
              <a href="rob.html" class="nav-link a-btn ltc-gold-web-golden">Rob</a>
          </li>
      </ul>
  </div>
</li>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>