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

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的元素。

根据上述说明，将'%this is a string%'赋予您的主要父级div。

在此示例中，父级为z-index: 1;。

li.nav-item