2

我想在右侧有两个单独的菜单，但彼此相邻（不堆叠）。

唯一对我有用（而且我已经尝试了很多）是下面的代码，它涉及我使用 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>
4

1 回答 1

0

确保使用列表中的下拉类。然后根据需要添加任意数量的列表项。一旦到达可见屏幕的末尾，列表项及其内容将换行（堆栈）。您的 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>
于 2016-11-17T16:48:46.160 回答