Zurb Foundation dropdown position to very first parent

Question

In Foundation 6 by default, dropdown menus appear on the same level as the parent like so:

Is there a way to make it so that the menu appears on the same level as the first menu? This is the desired outcome:

I have looked through the documentation and cannot seem to find a way to do it. Thanks in advance!

This is a snippet of the default code from Foundation site

<ul class="dropdown menu" data-dropdown-menu>
  <li>
    <a>Item 1</a>
    <ul class="menu">
      <li><a href="#">Item 1A Loooong</a>
      </li>
      <li>
        <a href='#'> Item 1 sub</a>
        <ul class='menu'>
          <li><a href='#'>Item 1 subA</a>
          </li>
          <li><a href='#'>Item 1 subB</a>
          </li>
          <li>
            <a href='#'> Item 1 sub</a>
            <ul class='menu'>
              <li><a href='#'>Item 1 subA</a>
              </li>
              <li><a href='#'>Item 1 subB</a>
              </li>
            </ul>
          </li>
          <li>
            <a href='#'> Item 1 sub</a>
            <ul class='menu'>
              <li><a href='#'>Item 1 subA</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Item 1B</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Item 2</a>
    <ul class="menu">
      <li><a href="#">Item 2A</a>
      </li>
      <li><a href="#">Item 2B</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Item 3</a>
  </li>
  <li><a href='#'>Item 4</a>
  </li>
</ul>

Here is a fiddle of the default: http://jsfiddle.net/65017wc2/

Answer 1

Here is a possible fix to do this :

.dropdown.menu {
  top: 0!important;
}
.dropdown.menu {
  position: relative;  
}

.dropdown.menu li { 
  position: static !important;
}

.dropdown.menu ul {
  margin-top: -1px;
}

I overwrite the relative position of li elements to the native static position and made the main ul relative, so all the dropdown menus are relative to the main ul menu.

See this fiddle