Foundation-sites: [F6] [Dropdown Menu] Dropdown opens off-screen with right-aligned menu (not RTL text)

[CodeGordon]

When using right-aligned menus, but not RTL text orientation (not using the .align-right class), dropdown menus still open aligned to their parent's left side. Such dropdowns should align instead to their parent's right side to appear on-screen as expected. This worked just fine in Foundation 5 without additional markup on any involved elements.

The following code will reproduce the issue with Foundation v6.0.1

<nav class="title-bar" role="navigation">
    <section class="title-bar-left">
        <span class="title-bar-title"><a href="/">Example Right Dropdown</a></span>
    </section>
    <section class="title-bar-right">
        <ul class="dropdown menu align-right" data-dropdown-menu role="menubar">
            <li class="has-submenu">
                <a href="javascript:void(0);">Menu</a>
                <ul class="submenu menu" data-submenu role="menu">
                    <li><a href="/menu-item">Menu Item</a></li>
                </ul>
            </li>
        </ul>
    </section>
</nav>

Included CSS: Foundation v6.0.1, Normalize v3.0.3
Included JS: Foundation v6.0.1, jQuery v2.1.4

[zurbchris]

Is the result of your code on my machine. What exactly is it doing on yours?

[CodeGordon]

My mistake. The example code still had the .align-right class applied. A live version of this issue is below. In addition, I've noticed that the link in the dropdown doesn't seem to work.

<nav class="title-bar" role="navigation">
    <section class="title-bar-left">
        <span class="title-bar-title"><a href="/">Example Right Dropdown</a></span>
    </section>
    <section class="title-bar-right">
        <ul class="dropdown menu" data-dropdown-menu role="menubar">
            <li class="has-submenu">
                <a href="javascript:void(0);">Menu</a>
                <ul class="submenu menu" data-submenu role="menu">
                    <li><a href="/menu-item">Menu Item</a></li>
                </ul>
            </li>
        </ul>
    </section>
</nav>

http://new.codegordon.com/

[zurbchris]

You will need the align-right class applied, as that implies all sub-menus should attach to their parent from the submenus right side.

[CodeGordon]

This also makes everything render in reverse order, which is not desirable. The classes .top-bar-right and .title-bar-right should do this, and as mentioned above, used to do exactly that.

We shouldn't need to add additional markup and shuffle around the menu lists, especially for functionality Foundation had in v5.

[CodeGordon]

After digging through the CSS a bit, it looks like the right-aligned bar used to apply the following to dropdowns, but no longer does.

position: absolute;
left: auto;
right: 0;

[CodeGordon]

The code below was sufficient to get it working like Foundation 5 used to. I'm not sure how to do this in SCSS format, though.

.top-bar-right .dropdown.menu .menu,
.title-bar-right .dropdown.menu .menu {
    position: absolute;
    left: auto;
    right: 0;
}

[zurbchris]

This should be fixed now, please reopen if still an issue.

[CodeGordon]

There's still an issue with v6.0.4, though a slightly different one. The menu opens with its right side aligned to the left side of the parent. Before, the right side of the menu was aligned with the parent's right side.

[zurbchris]

You still need to add the align-right class to have it position where you want it. I added the class on your live site and this is what you get:

[CodeGordon]

Again, not only is that a redundant class to add, given the .top-bar-right/.title-bar-right class above it, but it uses float, which reverses the order of the bar-level menu items. This is most definitely not desired behavior.

[zurbchris]

I'm going to leave this one for @gakimball to resolve this in the scss, but here's a working solution for now:
apply the align-right class to your dropdown menu, then in your own sass/css target .menu.align-right > li with float: left;.
This is not an ideal solution, but that's what I have for you for now. This is the result:

Cheers.