Menu icon Foundation
F6 Dropdown menu alignment working only once

So, I've been trying to position a dropdown menu inside a topbar with Foundation 6.1 but it seems like the alignment works only once.

I'm using the data-options="alignment:right;" option and when hovering over the dropdown the first time the option is applied correctly but after that it seems like data-options are ignored. Is this a bug? Am I doing something wrong?

Code attached below.

ul class="dropdown menu" data-dropdown-menu data-options="alignment:right;">
      @if (Auth::check())
        <li>
          <a href="#">&commat;{{ Auth::user()->getUsername()}}</a>
          <ul class="menu vertical">
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
          </ul>
        </li>
        <li><a href="{{ route('auth.logout') }}">Sign out</a></li>
      @else
      <li><a href="{{ route('auth.register') }}">Register</a></li>
      <li><a href="{{ route('auth.login') }}">Login</a></li>
      @endif
    </ul>

foundation 6dropdownmenutopbar

So, I've been trying to position a dropdown menu inside a topbar with Foundation 6.1 but it seems like the alignment works only once.

I'm using the data-options="alignment:right;" option and when hovering over the dropdown the first time the option is applied correctly but after that it seems like data-options are ignored. Is this a bug? Am I doing something wrong?

Code attached below.

ul class="dropdown menu" data-dropdown-menu data-options="alignment:right;">
      @if (Auth::check())
        <li>
          <a href="#">&commat;{{ Auth::user()->getUsername()}}</a>
          <ul class="menu vertical">
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
          </ul>
        </li>
        <li><a href="{{ route('auth.logout') }}">Sign out</a></li>
      @else
      <li><a href="{{ route('auth.register') }}">Register</a></li>
      <li><a href="{{ route('auth.login') }}">Login</a></li>
      @endif
    </ul>
Rafi Benkual over 3 years ago

I see your example code working here. Where do you expect the dropdown to be?

Where are you positioning the menu here?