zurb-foundation-5/doc/includes/topbar/examples_topbar_mobile_parent_links.html

Foundation 5 for npm (no code modification from original repo)

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <!-- Title Area -->
    <li class="name">
      <h1><a href="#">Mobile Parent Links</a></h1>
    </li>
    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href=""><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="left">
      <li class="has-dropdown"><a href="http://foundation.zurb.com/docs/components/topbar.html">Item 1</a>

        <ul class="dropdown">
          <li><label>Level One</label></li>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li class="divider"></li>
          <li><a href="#">Sub-item 3</a></li>
          <li class="has-dropdown"><a href="http://foundation.zurb.com/docs/components/topbar.html">Sub-item 4</a>

            <ul class="dropdown">
              <li><label>Level Two</label></li>
              <li class="has-dropdown"><a href="http://foundation.zurb.com/docs/components/topbar.html">Sub-item 1</a>

                <ul class="dropdown">
                  <li><label>Level Three</label></li>
                  <li class="has-dropdown"><a href="http://foundation.zurb.com/docs/components/topbar.html">Sub-item 1</a>

                    <ul class="dropdown">
                      <li><label>Level Four</label></li>
                      <li><a href="#">Sub-item 1</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Sub-item 2</a></li>
                  <li><a href="#">Sub-item 3</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Sub-item 4</a></li>
                </ul>
              </li>
              <li><a href="#">Sub-item 2</a></li>
              <li><a href="#">Sub-item 3</a></li>
              <li><a href="#">Sub-item 4</a>
            </ul>
          </li>
          <li><a href="#">Sub-item 5</a></li>
        </ul>
      </li>
      <li class="divider"></li>
    </ul>
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="divider"></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </section>
</nav>