JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
    <li>item 1</li>
    <li>item 2
        <ul>
            <li>List 2.1
                <ul>
                    <li>item 2.1.1</li>
                    <li>item 2.1.2</li>
                    <li>item 2.1.3</li>
                </ul>
            </li>
            <li>List 2.2
                <ul>
                    <li>item 2.2.1</li>
                    <li>item 2.2.2</li>
                    <li>item 2.2.3</li>
                </ul>
            </li>
            <li>list 2.3
                <ul>
                    <li>item 2.3.1</li>
                    <li>item 2.3.2</li>
                    <li>item 2.3.3</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>item 3</li>
    <li>item 4</li>
</ul>

CSS

body, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 500px; /* needs to be a fixed width */
    background: lightblue;
}
.nav > li {
    display: inline-block;
    background: lightblue;
    margin-right: -4px;
    padding: 15px;
}
.nav > li > ul {
    position: absolute;
    display: table;
    width: 500px; /* same width as .nav */
    left: 0;
    margin-top: 15px;
    background: lightgreen;
}
.nav > li > ul > li {
    display: table-cell;
    width: 33%;
}