Menu icon Foundation
Dropdown within Dropdown?

Hiya

Does anyone know if I could create a dropdown within a dropdown, wherein I can click a second anchor within the dropdown and keep the parent dropdown open? Currently, when I click on the "sub-menu" dropdown anchor it closes the parent dropdown. Code is below. Any thoughts would be helpful. Thanks in advance.

<a href="#" data-dropdown="drop" class="button dropdown hide"><i class="fi-list"></i></a>
      <ul id="drop" class="f-dropdown" data-dropdown-content>

        <li class="nav-list">
          <a href="#" data-dropdown="drop1">Background</a>
          <ul id="drop1" class="f-dropdown sub-nav" data-dropdown-content>
            <li class="nav-list"><a href="our-story.php">Our Story</a></li>
            <li class="nav-list"><a href="our-home.php">Our Home</a></li>
            <li class="nav-list"><a href="philosophy.php">Philosophy</a></li>
          </ul>
        </li>

        <li class="nav-list"><a href="wine.php">Wines</a></li>

      </ul>  

dropdown

Hiya

Does anyone know if I could create a dropdown within a dropdown, wherein I can click a second anchor within the dropdown and keep the parent dropdown open? Currently, when I click on the "sub-menu" dropdown anchor it closes the parent dropdown. Code is below. Any thoughts would be helpful. Thanks in advance.

<a href="#" data-dropdown="drop" class="button dropdown hide"><i class="fi-list"></i></a>
      <ul id="drop" class="f-dropdown" data-dropdown-content>

        <li class="nav-list">
          <a href="#" data-dropdown="drop1">Background</a>
          <ul id="drop1" class="f-dropdown sub-nav" data-dropdown-content>
            <li class="nav-list"><a href="our-story.php">Our Story</a></li>
            <li class="nav-list"><a href="our-home.php">Our Home</a></li>
            <li class="nav-list"><a href="philosophy.php">Philosophy</a></li>
          </ul>
        </li>

        <li class="nav-list"><a href="wine.php">Wines</a></li>

      </ul>  
Matthew Cook almost 6 years ago

Mo,
Having just started with Foundation, I've just written pretty much exactly the same code as you. I haven't used the topbar as it seems easier to customise individual links. But I'm looking for the answer too. Any help/guidance would be appreciated.
Thanks.

Diego Lucero almost 6 years ago

Hey Guys, I've just been playing around with Foundation for a few hours and I ran into the same problem as it does not come with the template "index.html"

I think I found the answer included in the"view-source" of the first sample menu in the Top-bar navigation documentation. (http://foundation.zurb.com/docs/components/topbar.html) I used the class "has-dropdown" on the li elements that have a dropdown contained within, and the class "dropdown" on the ul contained within it.

The example shows a 4 level deep sub-menu that allows for the parent element menus to stay open as you click deeper into the menu.

Let me know if this solves it, or if I completely missed what you were asking for (again here is the link to the documentation: http://foundation.zurb.com/docs/components/topbar.html)

And the full raw code of the nav itself:
http://codepen.io/dlucero23/pen/ltsAk