首页 文章

CSS下拉菜单子项定位

提问于
浏览
0

我有一个问题,我的下拉总是在左边 . 我需要它,所以它直接在每个菜单项下 .

我试着玩定位,因为子项的绝对性是它一直在左边的原因 . 但在 subitem 上放置 position: relative 会在悬停时完全打破菜单 .

演示演示: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> "smashes"所有项目togther: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

1 回答

  • 1

    position: relative; 添加到 .item ,将 left: 0; 添加到 .subitem .

    这将使子项目本身相对于父项目,这应该为您提供所需的结果:https://jsfiddle.net/58sb3rL4/

相关问题