Zurb Foundation 下拉位置到第一个父级

Question

默认情况下，在 Foundation 6 中，下拉菜单显示在与父级相同的级别，如下所示：

有没有办法让菜单出现在第一个菜单的同一层级？这是期望的结果：

我已经查看了文档，但似乎无法找到实现它的方法。提前致谢！

这是 Foundation 站点的默认代码片段

<ul class="dropdown menu" data-dropdown-menu>
  <li>
    <a>Item 1</a>
    <ul class="menu">
      <li><a href="#">Item 1A Loooong</a>
      </li>
      <li>
        <a href='#'> Item 1 sub</a>
        <ul class='menu'>
          <li><a href='#'>Item 1 subA</a>
          </li>
          <li><a href='#'>Item 1 subB</a>
          </li>
          <li>
            <a href='#'> Item 1 sub</a>
            <ul class='menu'>
              <li><a href='#'>Item 1 subA</a>
              </li>
              <li><a href='#'>Item 1 subB</a>
              </li>
            </ul>
          </li>
          <li>
            <a href='#'> Item 1 sub</a>
            <ul class='menu'>
              <li><a href='#'>Item 1 subA</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Item 2</a>
    <ul class="menu">
      <li><a href="#">Item 2A</a>
      </li>
      <li><a href="#">Item 2B</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Item 3</a>
  </li>
  <li><a href='#'>Item 4</a>
  </li>
</ul>

这里是默认的fiddle：http://jsfiddle.net/65017wc2/

Answer 1

这里有一个可能的修复方法：

.dropdown.menu {
  top: 0!important;
}
.dropdown.menu {
  position: relative;  
}

.dropdown.menu li { 
  position: static !important;
}

.dropdown.menu ul {
  margin-top: -1px;
}

我把li元素的relative位置覆盖到原生的static位置，并且做了主ulrelative，所以所有的下拉菜单都是相对于ul 主菜单。

See this fiddle

Zurb Foundation 下拉位置到第一个父级

Zurb Foundation dropdown position to very first parent

html

javascript

css

zurb-foundation