css - 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>

不幸的是，要么显示放弃给行元素的浏览器定义，要么 display:block;来自 Foundation 的基本代码甚至覆盖了 <li style='display: float'><a href="#" style='display: float'>及其 .menu a类定义。

如何实现这一行？

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;
        }
      }
    }