How to place a drop-down folder?

Question

I am using the Foundation 5.4.5 drop-down list for my login form, but the problem is that the dropdown menu looks like this:

I want it to look like the one that was open, where the noob on the right and the body was well positioned

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 like WORKAROUNDS. However, I get your opinion: you want the drop-down list to appear at the bottom of your link, but aligned with the right border. I would appreciate it if someone came up with an answer for this, because the foundation site shows that this is possible in an undocumented form.

Answer 2

To indicate how the drop-down menu shows the alignment property in the data parameters in the target element.

Add data-options="align:right" to the a tag.