html - 为什么我的下拉菜单只允许我单击菜单中的第一项？

Question

我正在尝试制作一个下拉菜单，允许我导航到我的 Web 应用程序中的不同页面。每次单击菜单时，元素都会正确显示，但我似乎无法单击第一项以外的任何内容。他们似乎被禁用了。

以下是它如何查找不同元素的图像:

它们都指向各自的页面，但超链接仅适用于第一项。我错过了什么吗？

这是我的代码片段:

<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-index 比你的下拉列表高。

z-index 是指定元素及其后代的 z 顺序的属性。当元素重叠时，z 顺序决定哪个覆盖另一个。具有较大 z-index 的元素通常会覆盖具有较低 z-index 的元素。

根据上面的解释，将 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>