JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <nav>
        <ul>
            <li>Link</li>
            <li>Link</li>
            <li class="page-has-children">
                Link
                <ul class="children">
                    <li>Link</li>
                    <li>Long Link</li>
                    <li>Longer Long Link</li>
                </ul>
            </li>
        </ul>
    </nav>
    <div class="clear"></div>
</div>

CSS

.clear {
    clear: both;
}
.container {
    width: 500px;
    margin: 0 auto;
    background: blue;
}
nav {
    float: right;
}
    nav ul {
        line-height: 78px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    nav ul li {
        padding: 0 16px;
        float: left;
    }
.page-has-children {
    position: relative;
}
.children {
    line-height: 48px;
    background: red;
    position: absolute;
    right: 0;
}
.children li {
    float: none;
    white-space: nowrap;
}