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

Question

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

当我悬停鼠标以显示菜单时，一切顺利，我什至可以 select 前几个元素。但是，一旦我到达第三个元素（位于包含操作面板的较大 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。这也很复杂，不管你给child什么z-index，比较的都是总是在同级别的2个html-elements之间.

如果您的菜单包含在具有 z-index: 1 的 div 中，并且它有一个具有 z-index: 2 的同级 div。 不管什么z-index：你给1st-childrendiv，不管是9999还是什么，直到parent 本身的 z-index 比它的兄弟姐妹或其他同级别的 html-elements 更高。所以，我不建议采用这种方法。

只需使用 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>

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

Simple hover sub-menu disappears after reaching 3rd item

css

hover