Issue with Foundation 5 Nav-bar Dropdown in Rails

Question

I am building out a nav-bar (code to follow) using the foundation framework / Gem in a rails 4 App. To start I am not much of a front end designer so I do apologize if this is an easy to fix problem but I can not seem to find much about it in my searches.

When I click on the Dropdown Item "Create Reports" it opens when I click it and closes right away - not giving any time to actually select the item I want to jump to.

Nav-Bar Code:

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

I followed the Foundation Instruction Guide to a tee and am not sure where to start with the trouble shooting.

Answer 1

Have you solved this problem? Surprisingly, I fixed it by accident. Firstly, I have a problem that nav bar dropdown overlapping under content. Then I solved it by adding "z-index: 999" in my css file. That will keep your nav bar on top of everything. That also means your cursor can focus on dropdown and you can select.