为什么我的 div 在悬停时都显示在同一位置？

Question

我想创建一个顶级菜单。我已经创建了这个，它可以让组件在必须时变得可见，但我的问题是我不知道如何让每个组件menu-sub-item都显示在悬停按钮下。

body {
  margin: 0
}

.menu {
  height: 20px;
  width: 100vw;
}

.menu-main-item:hover+.menu-sub-item {
  display: flex;
  position: absolute;
  top: 20px;
}

.menu-sub-item {
  display: none;
  z-index: 1;
  flex-direction: column;
}

.menu-sub-item:hover {
  display: flex;
  position: absolute;
  top: 20px;
}

<div class="menu">
  <button class="menu-main-item">This is 1</button>
  <div class="menu-sub-item">
    <button>Sub 1.1</button>
    <button>Sub 1.2</button>
    <button>Sub 1.3</button>
  </div>
  <button class="menu-main-item">Ok 2</button>
  <div class="menu-sub-item">
    <button>Sub 2.1</button>
    <button>Sub 2.2</button>
    <button>Sub 2.3</button>
  </div>
  <button class="menu-main-item">Another 3</button>
  <div class="menu-sub-item">
    <button>Sub 3.1</button>
    <button>Sub 3.2</button>
    <button>Sub 3.3</button>
  </div>
</div>

Answer 1

我会使用一个无序列表（把你的.menu元素变成 a ul），这样你就可以.menu-sub-item相对于它的列表项定位元素。

您需要设置position: relative为li元素和white-space: nowrap按钮，因此标题将溢出其容器。

body {
  margin: 0
}

.menu {
  height: 20px;
  width: 100vw;
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
}

.menu li { position: relative; }

.menu button { 
  text-align: left;
  white-space: nowrap; }


.menu-main-item:hover+.menu-sub-item {
  display: flex;
  position: absolute;
  top: 20px;
}

.menu-sub-item {
  display: none;
  z-index: 1;
  flex-direction: column;
}

.menu-sub-item:hover {
  display: flex;
  position: absolute;
  top: 20px;
}

<ul class="menu">
  <li>
    <button class="menu-main-item">This is 1</button>
    <div class="menu-sub-item">
      <button>Sub 1.1</button>
      <button>Sub 1.2</button>
      <button>Sub 1.3</button>
    </div>
  </li>
  <li>
    <button class="menu-main-item">Ok 2</button>
    <div class="menu-sub-item">
      <button>Sub 2.1 and some other text</button>
      <button>Sub 2.2</button>
      <button>Sub 2.3</button>
    </div>
  </li>
  <li>
    <button class="menu-main-item">Another 3</button>
    <div class="menu-sub-item">
      <button>Sub 3.1</button>
      <button>Sub 3.2</button>
      <button>Sub 3.3</button>
    </div>
  </li>
</ul>