到达第 3 项后，简单的悬停子菜单消失

Question

我目前正在制作一个简单的悬停动作菜单（相对简单，并且在以前的应用程序中完成）。

当我将鼠标悬停以显示菜单时，一切顺利，我什至可以选择前几个元素。但是，一旦我到达第三个元素（位于包含操作面板的较大 div 的边缘），其余元素就位于页面上后面的元素之后。我试过调整 z 值，悬停菜单的定位是绝对的，子菜单嵌套在 <li> 元素中，并用不同的 html 结构多次重写。

HTML 示例

<div>
        <menu aria-label='action menu'>
          <li><p>{'Sort by '}<span>{sortType}</span></p>
            <menu>
              <li><a href='/'>{'Sort'}</a></li>
              <li><a href='/'>{'Sort again'}</a></li>
              <li><a href='/'>{'Sorting'}</a></li>
              <li><a href='/'>{'Sorted'}</a></li>
            </menu>
          </li>
        </menu>
      </div>

CSS 示例：

> div {
    margin-right: 16px;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    height: 100%;

    > menu {
      display: block;
      list-style: none;

      > li {
        width: 100%;
        position: relative;

        > menu {
          list-style: none;
          display: list-item;
          position: absolute;
          right: 0;

          > a {
            display: block;
            width: 100%;
          }
        }
      &:hover {
          > menu {
            display: list-item;
            position: absolute;
            right: 0;
            
            > li {
              display: block;

              > a {
                display: block;
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
}

Answer 1

如果您尝试制作导航栏或导航栏，只需使用ol li 或ul li。此外，如果没有任何效果，您应该只使用z-index。这也很复杂，不管你给孩子什么 z-index，比较总是在同一级别的 2 个 html 元素之间。

如果您的菜单包含在一个具有z-index: 1 的div 中，并且它有一个具有z-index: 2 的同级div。 什么 z-index 无关紧要：你给 1st-div 的子级，无论是 9999 还是其他，直到父级本身具有更高的 z-index，与其同级或其他 html 元素相比和它一样的水平。所以，我不建议采用这种方法。

只需使用ol li 或ul li 即可完成您的任务。

div {
  background:yellow;
  border:2px solid #000;
  margin-right:10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

ol li {list-style-type:none;}

.list-items {display:none;}

.my-list li:hover .list-items {
  display:block;
}

<div>
  <ol class="my-list">
    <li>{'Sort by '}{sortType}
      <ol class="list-items">
        <li><a href='/'>{'Sort'}</a></li>
        <li><a href='/'>{'Sort again'}</a></li>
        <li><a href='/'>{'Sorting'}</a></li>
        <li><a href='/'>{'Sorted'}</a></li>
      </ol>
    </li>
  </ol>
</div>