Foundation 6.4调整顶部栏

Question

Foundation的顶部栏导航工具被设置为完全依赖列表和项目标签来充实链接的层次结构。

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
</div>

但是，为了软化此结构，目标是使第二层链接在一行上，例如

<ul><li>
<a href="#">One</a>  <a href="#">Two</a>  <a href="#">Three</a>
</li></ul>

不幸的是，任一显示都被放到行项的浏览器定义中，或者从Foundation的基础代码中选择display:block;甚至覆盖<li style='display: float'><a href="#" style='display: float'>及其类定义。

如何实现这种单线？

Answer 1

看起来您可能混淆了CSS规则：.menu a和display: block;。默认行为看起来像是希望它是垂直的，并且该结构看起来是以这种方式构建的。我没有在他们的文档中看到任何内容（我略过了他们，大声笑），但是我要做的是在该子菜单上使用float: none，然后定位它。我不知道菜单的其余部分是什么样的，但是我认为您需要进行调整。

我创建了一个可以执行您需要的代码笔。

position:absolute;

https://codepen.io/bjorniobennett/pen/bGGajWZ