FOUC on foundation topbar dropdown menu

I'm trying to style a topbar menu with submenu items in Foundation. The code seems right, but the submenu items keep breaking the styling of the topbar on a page refresh, then going into place (hidden under the top menu item) when the javascript loads.

The docs address FOUC on the dropdown arrows, but not on the list items themselves.

Code:

<div class="top-bar">
<ul class="dropdown menu" data-dropdown-menu>
  <li class="is-dropdown-submenu-parent">
    <a href="#">Item 1</a>
    <ul class="menu">
      <li><a href="#">Item 1A</a></li>
      <li><a href="#">Item 1B</a></li>
      <li><a href="#">Item 1C</a></li>
      <li><a href="#">Item 1D</a></li>
      <li><a href="#">Item 1E</a></li>
      <li><a href="#">Item 1F</a></li>
      <li><a href="#">Item 1G</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>
</div>

Codepen: http://ift.tt/2tkDyIK

This flashing also happens on the official codepen: http://ift.tt/2s1LkU0