How to position Foundation Dropdown?

Question

I am using Foundation 5.4.5 dropdown for my login form but the problem is that the dropdown appears like this:

I want it to be like the one opened where the nub on the right and the body positioned well

Here is my HTML:

<a data-dropdown="drop1" aria-controls="drop1" aria-expanded="false">Has Dropdown</a>
    <ul id="drop1" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
      <li><a href="#">This is a link</a></li>
      <li><a href="#">This is another</a></li>
      <li><a href="#">Yet another</a></li>
    </ul>

Answer 1

You have two options

<a data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" data-options="align:left">Has Dropdown</a>

Or

<ul id="drop1" class="f-dropdown drop-left" data-dropdown-content aria-hidden="true" tabindex="-1">
      <li><a href="#">This is a link</a></li>
      <li><a href="#">This is another</a></li>
      <li><a href="#">Yet another</a></li>
    </ul>

Both work AS WORKAROUNDS. However, I get your point: you want your dropdown to be displayed in the bottom of your link, but aligned with the right border. I would be grateful if someone came up with an answer for that because the foundation site show it is possible in some undocumented way.