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'> 及其 .menu a class定义。

这一行如何实现？

Answer 1

看起来您可能混淆了 css 规则：display: block; 和 float: none。默认行为看起来像是它希望它是垂直的，并且结构看起来就是以这种方式构建的。我没有在他们的文档中看到任何关于此的内容（我粗略地浏览了一下，哈哈）但我所做的是在该子菜单上使用 position:absolute;，然后定位它。我不知道你菜单的其余部分是什么样子，但我想你需要进行调整。

我创建了一个代码笔，可以满足您的需要。

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

    ul.dropdown > li {
      position: relative;

      &:hover {
        > ul.vertical {
            display: block;
        }
      }

      > ul.vertical {
        display: none;
        position: absolute;
        width: 500%; 
        background: #c5c5c5;
        top: 120%;

        > li {
          display: inline-block;
          float: left;
        }
      }
    }

Foundation 6.4 调整顶栏

Foundation 6.4 tweaking top bar

css

zurb-foundation