Mega Nav Dropdown Menu

I am trying to create a mega nav dropdown and encountering issues with how Foundation translates the HTML and classes. I am using this for reference, but getting different results:

I have this in my template (simplified) which follows the building block except I’m not using top-bar.

<ul class="dropdown menu" data-dropdown-menu>
  <li class="mega-menu">
    <a class="top-level" data-toggle="mega-nav" href="#">Dropdown</a>
    <div class="dropdown-pane bottom" id="mega-nav" data-dropdown>
      <div class="grid-x">
        <div class="cell auto">
          <ul class="menu vertical">
            <li><a href="#">Link</a></li>
          </ul>
        </div>
        <div class="cell auto">
          <ul class="menu vertical">
            <li><a href="#">Link</a></li>
          </ul>
        </div>
      </div>
    </div>
  </li>
</ul>

But it becomes this totally different configuration that does not respect the separate menus.

<ul class="dropdown menu" data-dropdown-menu="xzgq0j-dropdown-menu" role="menubar">
  <li role="menuitem" class="is-dropdown-submenu-parent opens-right" aria-haspopup="true" aria-label="Dropdown" data-is-click="false">
    <a href="#">Dropdown</a>
    <ul class="vertical menu submenu is-dropdown-submenu first-sub" data-submenu="" role="menubar" style="">
      <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item">
        <a href="#">Link</a>
      </li>
      <li role="menuitem" class="sub-title is-submenu-item is-dropdown-submenu-item">
        <a href="#">Link</a>
      </li>
    </ul>
  </li>
</ul>

It seems like I should avoid dropdown-menu entirely. Is there a better way to approach mega navs? I don’t see settings to turn off the aggressive reconfiguring.

Ugh! Ignore me. It was an issue with the loop I created to populate the HTML.