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