与基础顶部并排放置两个菜单的最佳方法是什么

Question

我想在右侧有两个单独的菜单，但彼此之间要紧挨着（不堆叠）。

唯一对我有用（并且我已经尝试过很多）的代码是以下代码，其中涉及我两次使用top-bar-right，并且感觉必须有更好的方法，并且似乎会引起微小的抽动每次重新加载页面时。

http://codepen.io/anon/pen/MKqzaG （下拉菜单在这里不起作用，但在我的计算机上有效。

<nav class="top-bar">
  <div class="top-bar-left">
    <ul class="menu">
      <li class="menu-text">JamNet</li>
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><a href="#">1</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">1</a></li>
      <li data-toggle="example-dropdown2"><a>v</a></li>
      <ul class="dropdown-pane top" id="example-dropdown2" data-dropdown>
        <li><a href="#">1</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">1</a></li>
      </ul>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><a href="#">2</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">2</a></li>
    </ul>
  </div>
</nav>

Answer 1

确保使用列表中的下拉类。 然后根据需要添加任意数量的列表项。 一旦到达可见屏幕的末尾，列表项及其内容将自动包装（堆叠）。 您的Codepen缺少Foundation.js和启动Foundation的代码。 这是您的Codepen的分支： http ://codepen.io/chris0/pen/QGGMpR

这是您的特定问题（所需样式）的解决方案：

<nav class="top-bar">
    <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">JamNet</li>
            <li><input type="search" placeholder="Search"></li>
            <li><button type="button" class="button">Search</button></li>
        </ul>
    </div>
    <div class="top-bar-right">
        <ul class="dropdown menu" data-dropdown-menu>
            <li>
                <a href="#" style="text-decoration: none;" onclick="return false;">DropDown1</a>
                <ul class="submenu menu vertical" data-submenu>
                    <li><a href="#">DD1a</a></li>
                    <li><a href="#">DD1b</a></li>
                </ul>
            </li>

            <li>
                <a href="#" style="text-decoration: none;" onclick="return false;">DropDown2</a>
                <ul class="submenu menu vertical" data-submenu>
                    <li><a href="#">DD2a</a></li>
                    <li><a href="#">DD2b</a></li>
                    <li><a href="#">DD2c</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>