Question

我希望在右侧有两个单独的菜单，但是在下一个（没有堆叠）彼此。

对我来说唯一有用的东西（我已经尝试了ALOT）是下面的代码，它涉及到我使用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和开始基础的代码。这是您的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>

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

1 个答案: