下拉菜单保持在同一个地方

Question

问题

您好！我的悬停下拉菜单有问题。即使没有被触发，它也始终停留在第一个导航项下，但它应该在被触发的导航项（鼠标指针所在的导航项）下。我该如何解决？提前致谢！

#nav-list {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.nav-item {
  display: inline;
  padding: 0;
}

.nav-item-text {
  padding: 16px;
  margin: 0;
  font-size: 14px;
  font-family: var(--primary-font-stack);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: context-menu;
  display: inline;
  color: var(--on-background);
  opacity: var(--high-emphasis);
}

.nav-item-link {
  padding: 20px;
  margin: 0;
  font-size: 14px;
  font-family: var(--primary-font-stack);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  display: inline;
  color: var(--on-background);
  opacity: var(--high-emphasis);
}

.nav-item-link:hover {
  opacity: 100%;
  cursor: pointer;
  transition: .2s ease all;
  color: var(--primary);
}

.nav-dropdown {
  display: none;
  opacity: 0;
  position: absolute;
  z-index: 99;
  margin: 3px 0 0 0;
  padding: 15px;
  height: auto;
  min-width: 280px;
  background: var(--background);
  border-radius: 4px;
  border: 2px solid var(--elevation-16dp);
}

.nav-item:hover .nav-dropdown {
  display: block;
  transition: .2s ease all;
  opacity: 100%;
}

<ul id="nav-list">
  <li class="nav-item">
    <p class="nav-item-text">Dropdown Trigger</p>
    <ul class="nav-dropdown">
      <li class="nav-drpdwn-item">
        <p class="nav-drpdwn-item-title">Title A 1</p>
      </li>
      <a class="nav-drpdwn-item-link" href="#">
        <li class="nav-drpdwn-item">Link</li>
      </a>
      <a class="nav-drpdwn-item-link" href="#">
        <li class="nav-drpdwn-item">Link</li>
      </a>
      <hr class="nav-drpdwn-hl">
      <li class="nav-drpdwn-item">
        <p class="nav-drpdwn-item-title">Title</p>
      </li>
      <a class="nav-drpdwn-item-link" href="#">
        <li class="nav-drpdwn-item">Link</li>
      </a>
    </ul>
  </li>
  <li class="nav-item">
    <p class="nav-item-text">Dropdown Trigger</p>
    <ul class="nav-dropdown">
      <li class="nav-drpdwn-item">
        <p class="nav-drpdwn-item-title">Title B 2</p>
      </li>
      <a class="nav-drpdwn-item-link" href="#">
        <li class="nav-drpdwn-item">Link</li>
      </a>
      <a class="nav-drpdwn-item-link" href="#">
        <li class="nav-drpdwn-item">Link</li>
      </a>
      <hr class="nav-drpdwn-hl">
      <li class="nav-drpdwn-item">
        <p class="nav-drpdwn-item-title">Title</p>
      </li>
      <a class="nav-drpdwn-item-link" href="#">
        <li class="nav-drpdwn-item">Link</li>
      </a>
    </ul>
  </li>
</ul>

Answer 1

您必须将此 css 添加到您的代码中：

<style>
    #nav-list > li {
        position:relative;
    }
    #nav-list .nav-dropdown {
        left: 0;
    }
</style>

下拉菜单保持在同一个地方

Dropdown stays in the same place

html

javascript

css

hover

dropdown

问题