CSS下拉菜单子项定位

Question

我遇到了一个问题，我的下拉菜单总是在左侧。我需要它，所以它就在每个菜单项的正下方。

我尝试使用定位，因为子项的绝对值是它一直在左侧的原因。但是将position: relative 放在subitem 上会在悬停时完全破坏菜单。

问题演示：https://jsfiddle.net/dsngpsxb/2/

代码如下：

HTML：

<nav class="main-navigation">
    <ul>
      <li class="item"><a href="#">item</a>
          <ul class="subitem">
            <li>subitem</li>
            <li>subitem</li>
            <li>subitem</li>
          </ul>
      </li>
      <li class="item"><a href="#">item</a>
          <ul class="subitem">
            <li>subitem</li>
            <li>subitem</li>
            <li>subitem</li>
          </ul>
      </li>
      <li class="item"><a href="#">item</a></li>
      <li class="item"><a href="#">item</a></li>
      <li class="item"><a href="#">item</a></li>
      <li class="item"><a href="#">item</a></li>
      <li class="item"><a href="#">item</a></li>
    </ul>
</nav>

SCSS/SASS：

.main-navigation {
  width: 100%;
  position: relative;
  ul {
    margin: 0 auto;
    padding: 18px;
    .item {
      display: inline;
      padding-right: 43px;
      font-size: 13px;
      text-transform: uppercase;
      &:hover ul {
        display: block;
      }
    }
  }
}

.subitem {
  display: none;
  position: absolute;
  top: 50px;
  li {
    line-height: 30px;
    font-size: 14px;
  }
}

请注意，我确实在这里进行了研究，并在 SO 上找到了几个问题来解释我的问题，我尝试了所有可接受的答案，但没有任何效果。

我将每个示例都包含在下面的相应 JSfiddle 示例中：

Dropdown menu appearing not below parent

将position: relative 添加到我的子项会完全破坏菜单：https://jsfiddle.net/mtp2cg7c/2/

CSS: make dropdown submenu appear below parent <ul> <li>

我的<li> 上的块显示、相对定位和左浮动，绝对定位，100% 顶部和左侧：0 在我的<ul> 上“粉碎”所有项目：https://jsfiddle.net/9s9Lmr1h/4/

CSS dropdown menu element moving to left?

在附加的小提琴中，我注意到全局容器是clear: both; 的属性——我尝试将它与浮动和定位结合使用。所有子项仍向左浮动：https://jsfiddle.net/3x3krdsd/1/

是我的<nav> 标签的错吗？我找不到任何暗示这个标签会改变这些规则行为的东西：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav

Answer 1

将position: relative; 添加到您的.item 和left: 0; 到您的.subitem。

这将使子项目本身相对于父项目定位，这应该会给你你想要的结果：https://jsfiddle.net/58sb3rL4/