基础 6：响应式切换不工作答案

【问题标题】：Foundation 6: Responsive Toggle no working基础 6：响应式切换不工作
【发布时间】：2016-03-15 22:42:15
【问题描述】：

我很喜欢 Foundation 5，现在我尝试使用 Foundation 6 作为我的标准。但是我在响应式切换（导航）方面遇到了问题。如您所见here，移动导航始终可见且没有内容。

这是我的 HTML：

菜单

<div class="top-bar" id="main-navigation">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li class="has-submenu">
        <a href="#">One</a>
        <ul class="submenu menu vertical" data-submenu>
          <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 class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

【问题讨论】：

这看起来工作正常，并且完全按照 F6 文档的建议执行。

标签： javascript css responsive-design navigation zurb-foundation

【解决方案1】：

您不是adding 基金会的默认js 和css 文件。首先，您需要正确添加它。

不过你可以试试下面的css

.dropdown.menu .has-submenu:hover .submenu {
  display:block;
}

希望对你有帮助。

【讨论】：

感谢您的回答，麦迪！这是不正确的。 app.css（包含所有样式）放在标题中。在页脚中你可以找到foundation.js...

【解决方案2】：

这应该适合你：

    <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li class="has-submenu">
        <a href="#">One</a>
        <ul class="submenu menu vertical" data-submenu>
          <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 class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

【讨论】：