Menu icon Foundation
Foundation 6 Dropdown Data Alignment

For some reason my dropdown menu is not working as intended. When I hover over the parent item, then nested menu shows up to the right of the parent, instead of underneath it. Using the data-alignment option does not seem to have any effect.

 

Any tips on how I could get this functioning correctly would be much appreciated.

 

Here is my menu

 

<div class="row large-menu show-for-large">   
      <div class="menu-centered"> 

        <ul class="drowpdown menu fs-menu" data-dropdown-menu data-alignment="above">
        <div class="nav-logo-image ribbon">
          <img src="{{root}}assets/img/nav-logo2.png" alt="">
        </div>
        <div class="ribbon-angle"></div>
          <li class="is-dropdown-submenu-parent"><a href="/beers.html" class="active">Full Sail Beers</a>
            <ul class="menu">
              <li class="opens-left"><a href="#">Example Dropdown</a></li>
            </ul>
          </li>
          <li><a href="#">Session</a></li>
          <li><a href="#">Brew Pub</a></li>
          <li><a class="nav-logo" href="#">Full Sail</a></li>
          <li><a href="#">Our Story</a></li>
          <li><a href="#">Where to buy</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
  </div>

menu right aligned for some reason

dropdownmenualignment

For some reason my dropdown menu is not working as intended. When I hover over the parent item, then nested menu shows up to the right of the parent, instead of underneath it. Using the data-alignment option does not seem to have any effect.

 

Any tips on how I could get this functioning correctly would be much appreciated.

 

Here is my menu

 

<div class="row large-menu show-for-large">   
      <div class="menu-centered"> 

        <ul class="drowpdown menu fs-menu" data-dropdown-menu data-alignment="above">
        <div class="nav-logo-image ribbon">
          <img src="{{root}}assets/img/nav-logo2.png" alt="">
        </div>
        <div class="ribbon-angle"></div>
          <li class="is-dropdown-submenu-parent"><a href="/beers.html" class="active">Full Sail Beers</a>
            <ul class="menu">
              <li class="opens-left"><a href="#">Example Dropdown</a></li>
            </ul>
          </li>
          <li><a href="#">Session</a></li>
          <li><a href="#">Brew Pub</a></li>
          <li><a class="nav-logo" href="#">Full Sail</a></li>
          <li><a href="#">Our Story</a></li>
          <li><a href="#">Where to buy</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
  </div>

menu right aligned for some reason

Rafi Benkual over 3 years ago

There is a misspelled class .dropdown 

<ul class="drowpdown

Ian Daly over 3 years ago

Thanks Rafi! That fixed it. I have been staring at too much code lately obviously.