PAGE_CONTAINER

<xf:macro name="nav_menu_entry" arg-navId="!" arg-nav="!" arg-depth="0">
    <xf:macro name="nav_link"
        arg-navId="{$navId}"
        arg-nav="{$nav}"
        arg-class="menu-linkRow u-indentDepth{$depth} js-offCanvasCopy" />
    <xf:if is="$nav.children">
        <xf:foreach loop="$nav.children" key="$childNavId" value="$child">
            <xf:macro name="nav_menu_entry"
                arg-navId="{$childNavId}"
                arg-nav="{$child}"
                arg-depth="{{ $depth + 1 }}" />
        </xf:foreach>
        <xf:if is="$depth == 0">
            <hr class="menu-separator" />
        </xf:if>
    </xf:if>
</xf:macro>

<xf:macro name="nav_menu_entry" arg-navId="!" arg-nav="!" arg-depth="0">
    <xf:if is="$nav.children">
        <div class="nav-popout">
    </xf:if>
    <xf:macro name="nav_link"
        arg-navId="{$navId}"
        arg-nav="{$nav}"
        arg-class="menu-linkRow u-indentDepth{$depth} js-offCanvasCopy {{ $nav.children ? 'nav-has-children' : 'nav-has-children' }}" />
        <xf:if is="$nav.children">
        <div class="nav-popout--menu">
        <xf:foreach loop="$nav.children" key="$childNavId" value="$child">
            <xf:macro name="nav_menu_entry"
                arg-navId="{$childNavId}"
                arg-nav="{$child}"
                arg-depth="{{ $depth + 1 }}" />
        </xf:foreach>
        <xf:if is="$depth == 0">
            <hr class="menu-separator" />
        </xf:if>
        </div>
    </xf:if>
    <xf:if is="$nav.children">
        </div>
    </xf:if>
</xf:macro>

extra.less

.menu--structural .menu-content
{
    overflow: visible !important;
    .nav-popout
    {
        position: relative;

        &:hover .nav-popout--menu { display: block; }
        > .nav-has-children:after
        {
            .m-faBase();
            .m-faContent("\f0da");
            float: right;
        }
        .nav-popout--menu
        {
            display: none;
            position: absolute;
            right: -200px;
            top: 0;
            width: 200px;
            background-color: @xf-contentBg;
            border: 1px solid @xf-borderColor;
        }
    }
}