Dropdown pane position bug

I’m trying to create a navigation bar that has a combination of megamenus and standard vertical menus ON THE RIGHT SIDE. I have gotten everything to work but came across an odd bug when a dropdown pane is near to the right edge of the screen.

See this page for a working example:

To recreate the bug, reduce your window width so the 4th menu item is near the right edge. When you hover over it, the dropdown appears properly right-aligned and under the button. Hover over it 3 more times and on the 4th hover it now jumps to the left side of the button and top aligned. Here’s some screenshots for visual reference:

Any thoughts on why this is happening?

On a side note, I have also tried using the “building block” example and couldn’t get that to work either.

Thanks for any help!!!

Probably related: https://github.com/foundation/foundation-sites/issues/9244

Oh! Tried that and it almost works. data-alignment has to be set to right in order for it to work. No other combinations have worked yet but will keep trying.

Got it working by changing the position to fixed. Also works great as a responsive nav and even with 2 columns.