Dropdown menus appear open when $global-flexbox is true in 6.2

[gremmie]

I'm trying to use flexbox support in foundation-sites 6.2.

I read the 6.2 upgrade notes.

In my _settings.scss I put $global-flexbox: true;

and then in my app.scss I have:

// @include foundation-grid;
@include foundation-flex-grid;
...
@include foundation-flex-classes;   // very last foundation @include

Dropdown menus suddenly appear open when the page is refreshed and stay that way permanently.

I have narrowed it down to $global-flexbox: true;. If I change this to false the menus start working again (they are initially closed and they drop down when hovered over).

An example menu I used was:

<ul class="dropdown menu" data-dropdown-menu>
  <li>
    <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>
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

[takl95]

I have exactly the same problem. Couldn figure out, how to fix it. Anyone?

[codymorgan]

this looks like it boils down to the specificity and the order of the compiled classes.
looks like the .menu{} rule is being presented after.is-dropdown-submenu{} overriding the display:none;

[gakimball]

If you place @include foundation-menu before @include foundation-dropdown-menu, does that fix it?

[gremmie]

Yes, I placed @include foundation-menu right before @include foundation-dropdown-menu, set $global-flexbox: true; and the menus appeared normally.

Thanks for looking into it.

[gakimball]

Solid, we'll do more testing and see how it affects the cascade. If it doesn't create any problems, then our starter projects will be updated to change the order.