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

Question

I want to have two separate menus on the right side but right next (not stacked) to each other.

The only thing that has worked for me (and I've tried ALOT) is the following code, which involves me using top-bar-right twice, and feel like there must be a better way and it seems to be causing a tiny twitch each time the page is reloaded.

http://codepen.io/anon/pen/MKqzaG (the dropdown doesn't work here but it does on my machine.

<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

Make sure you use the dropdown class in the list. Then add as many list items as you want. Once the end of the visible screen is reached the list items and their contents will wrap (stack). Your codepen is missing foundation.js and the code to start foundation. Here is a fork to your codepen: http://codepen.io/chris0/pen/QGGMpR

Here is a solution to your specific question (style as desired):

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