Menu icon Foundation
Nested Dropdown Button

I'm trying to make a nested dropdown button in my rails application. This is not a topbar.

I've attempted two scenarios.

Scenario One

The first is a dropdown menu that looks like so:

--> Main button
-->--> Next Menu
-->-->--> Next Menu first item

The Main button when clicked works as expected.
The Next Menu button when hovered does not show next menu first item link.

Scenario Two

If I remove the hover and make it an exact duplicate (with different IDs) as the first button, when clicking the Next Menu, it fails to show the Next Menu first item link.

There is no documentation showing any nested dropdowns for anything outside of the topbar. Does such a thing exist?

<div class="small-1 medium-4 large-2 columns">
  <%= link_to '#', class: 'main-button', "data-dropdown" => "firstmenu" do %>
    <i class="general foundicon-edit"></i>&nbsp;&nbsp;Main button item &raquo
  <% end %>
  <!-- BUTTON DROPDOWN -->
  <ul id="firstmenu" class="f-dropdown" data-dropdown-content>
    <li>
      <%= link_to '#', "data-dropdown" => "nextmenu", "data-options" => "is_hover:true" do %>
        <i class="general foundicon-edit"></i>&nbsp;&nbsp;Next Menu &raquo
      <% end %>
      <!-- Nested Dropdown with hover -->
      <ul id="nextmenu" class="f-dropdown" data-dropdown-content>
        <li>
          <%= link_to some_path do %>
            <i class="general foundicon-graph"></i>&nbsp;&nbsp;Next menu first item
          <% end %>
        </li>
      </ul>
    </li>
  </ul>
</div>
            

         

nesteddropdownbutton

I'm trying to make a nested dropdown button in my rails application. This is not a topbar.

I've attempted two scenarios.

Scenario One

The first is a dropdown menu that looks like so:

--> Main button
-->--> Next Menu
-->-->--> Next Menu first item

The Main button when clicked works as expected.
The Next Menu button when hovered does not show next menu first item link.

Scenario Two

If I remove the hover and make it an exact duplicate (with different IDs) as the first button, when clicking the Next Menu, it fails to show the Next Menu first item link.

There is no documentation showing any nested dropdowns for anything outside of the topbar. Does such a thing exist?

<div class="small-1 medium-4 large-2 columns">
  <%= link_to '#', class: 'main-button', "data-dropdown" => "firstmenu" do %>
    <i class="general foundicon-edit"></i>&nbsp;&nbsp;Main button item &raquo
  <% end %>
  <!-- BUTTON DROPDOWN -->
  <ul id="firstmenu" class="f-dropdown" data-dropdown-content>
    <li>
      <%= link_to '#', "data-dropdown" => "nextmenu", "data-options" => "is_hover:true" do %>
        <i class="general foundicon-edit"></i>&nbsp;&nbsp;Next Menu &raquo
      <% end %>
      <!-- Nested Dropdown with hover -->
      <ul id="nextmenu" class="f-dropdown" data-dropdown-content>
        <li>
          <%= link_to some_path do %>
            <i class="general foundicon-graph"></i>&nbsp;&nbsp;Next menu first item
          <% end %>
        </li>
      </ul>
    </li>
  </ul>
</div>