下拉菜单停留在同一个地方

Posted 2023-03-06

【中文标题】下拉菜单停留在同一个地方

【英文标题】：Dropdown stays in the same place

【发布时间】：2020-08-01 10:36:09

【问题描述】：

问题

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

#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>

【问题讨论】：

将<li>的显示改为display: inline-block;

【参考方案1】：

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

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