JSFiddle - React, Tailwind, and code Playground

by willemvb

HTML

<nav>
    <ul>
        <li>Li 1
            <ul>
                <li>Sub 1</li>
                <li>Sub 2</li>
            </ul>
        </li>
        <li>Li 2
            <ul class="green">
                <li>Sub 1</li>
                <li>Sub 2</li>
                <li>Sub 3</li>
            </ul>
        </li>
    </ul>
</nav>

CSS

nav {
    width: 200px;
    border: 1px dashed #000;
}
ul {
    display: block;
    position: relative;
    border: 1px solid #000;
    top: 0;
}
ul ul {
    position: absolute;
    left: 100%;
    top: 0;
    width: 100%;
}
ul.green {
    left: 200%;
    border: 2px solid green;
    height: auto;
}