Rails 中的 Foundation 5 导航栏下拉列表问题

Question

我正在 rails 4 应用程序中使用基础框架/Gem 构建导航栏（要遵循的代码）。首先，我不是一个前端设计师，所以如果这是一个容易解决的问题，我深表歉意，但我在搜索中似乎找不到太多相关信息。

当我单击下拉项 "Create Reports" 时，它在我单击它时打开并立即关闭 - 没有给我任何时间实际 select 我想跳转到的项目。

导航条码：

<div class="fixed">
  <nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
      <li class="name"><h1><%= link_to "PatrolProRMS", root_path %></h1></li>
      <li class="toggle-topbar menu-icon"><span></span></li>
    </ul>
    <section class="top-bar-section">
    <!-- Right Nav Section -->
      <ul class="right">
        <li><%= link_to "Edit Profile" %></li> <!-- Add Registration Edit Link -->
        <li class="has-dropdown">
          <%= link_to "Create Documents" %>
          <ul class="dropdown">
            <li><%= link_to "General Patrol Report" %></li>
            <li><%= link_to "Incidnet Report - Static" %></li>
            <li><%= link_to "Incident Report - Mobile" %></li>
          </ul>
        <li><%= link_to "Sign Out" %></li>
      </ul>
    <!-- Left Nav Section -->
      <ul class="left">
      <li><%= link_to "Patrol Locations", sites_path %></li>
      <li><%= link_to "Resident Directory" %></li>
      <li><%= link_to "Visitor Parking Registry" %></li>
      </ul>
    </section>
  </nav>
</div>

我按照 Foundation Instruction Guide 学习了 T 台，但不确定从哪里开始解决问题。

Answer 1

这个问题你解决了吗？令人惊讶的是，我不小心修复了它。首先，我有一个问题，导航栏下拉菜单在内容下重叠。然后我通过在 css 文件中添加 "z-index: 999" 来解决它。这将使您的导航栏位于所有内容之上。这也意味着您的光标可以集中在下拉菜单上，您可以 select.

Rails 中的 Foundation 5 导航栏下拉列表问题

Issue with Foundation 5 Nav-bar Dropdown in Rails

html

ruby-on-rails-4

zurb-foundation-5