Q:

Aurelia is emitting different css code in Foundation using a dropdown menu when compared to the same page when using the regular method

System Info:
Windows 7 x64
aurelia-framework: "^1.0.0-beta.1.1.3"
"foundation-sites": "^6.2.1"
skeleton-navigation-webpack

How do I get the css code emitted when using aurelia and foundation together to be the same as when using foundation alone in a standard web page?  This is causing the dropdown to work incorrectly.
I am using the skeleton-navigation-webpack and just substituting foundation html and css for nav-bar and a empty welcome page
Aurelia Code
main.js to initialize foundation framwork
 aurelia.start().then(a => a.setRoot('app', document.body))
    .then(a => {
      // Initialize any frameworks you want to use
       $(document).foundation();
      console.log('foundation loaded')
    });

The  initialization of foundation $(document).foundation();  seems to work as the dropdown menu is displayed and working but the css is slightly different
nav-bar.html snippet before code is emitted
      <ul class="menu" data-responsive-menu="drilldown medium-dropdown">
        <li class="has-submenu">
          <a href="#">One</a>
          <ul class="submenu menu vertical" data-submenu>
            <li repeat.for="row of router.navigation">
              <a href.bind="row.href">${row.title}</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
      </ul>

Importing the foundation css in Aurelian and link in standard html page. The only difference is in the html page in using the repeat.for for <li> via Aurelia
emitted code in Aurelia
<ul class="menu dropdown" data-responsive-menu="drilldown medium-dropdown" role="menubar" data-dropdown-menu="x96kho-dropdown-menu">
        <li class="has-submenu is-dropdown-submenu-parent opens-left" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="One" data-is-click="false">
          <a href="#" tabindex="0">One</a>
          <ul class="submenu menu vertical is-dropdown-submenu first-sub" data-submenu="" aria-hidden="true" role="menu">
            <!--<view>--><li role="menuitem" class="is-submenu-item is-dropdown-submenu-item">
              <a href.bind="row.href" class="au-target" au-target-id="1" href="#/">Welcome</a>
            </li><!--</view>--><!--<view>-->

Standard html page
<ul class="menu dropdown" data-responsive-menu="drilldown medium-dropdown" role="menubar" data-dropdownmenu="nfmerw-dropdownmenu" data-responsivemenu="8q9bqc-responsivemenu">
      <li class="has-submenu is-dropdown-submenu-parent is-down-arrow is-active" role="menuitem" tabindex="0" title="One" aria-haspopup="true">
        <a href="#" tabindex="-1">One</a>
        <ul class="submenu menu vertical is-dropdown-submenu first-sub js-dropdown-active" data-submenu="" aria-hidden="false" tabindex="-1" role="menu">
          <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item" tabindex="0"><a href="#" tabindex="-1">One</a></li>

One specific is the open-left class in the first <li>
   <li class="has-submenu is-dropdown-submenu-parent opens-left" role="menuitem" aria-haspopup="true" aria-expanded="false" aria-label="One" data-is-click="false">

Verse the is-down arrow is active
<li class="has-submenu is-dropdown-submenu-parent is-down-arrow is-active" role="menuitem" tabindex="0" title="One" aria-haspopup="true">

A:

'reflow' is not Foundation 6, I instead use
attached(){
  // refresh JS after DOM is loaded
  $(document).foundation();
}

I can't test if this works better helping you out on the different CSS, but I do know this is the new reflow.
Answer found here: Foundation 6 & Reflow. I tested the reflow functionality, it works.

