JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header"></div>
<nav>
    <ul>
        <li> <a href="#">Item</a>

            <ul>
                <li><a href="#">First</a>
                </li>
                <li><a href="#">Second</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Item</a>

            <ul>
                <li><a href="#">First</a>
                </li>
                <li><a href="#">Second</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Item</a>

            <ul>
                <li><a href="#">First</a>
                </li>
                <li><a href="#">Second</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Item</a>

            <ul>
                <li><a href="#">First</a>
                </li>
                <li><a href="#">Second</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

CSS

a {
    text-decoration: none;
}

.header {
    height: 50px;
    width: 100%;
    background: blue;
}
nav {
    width: 800px;
}
ul {
    width: 100%;
    float: left;
    list-style-type: none;
}
ul > li {
    background-color: yellow;
    float: left;
    text-align: center;
    position: relative;
    width: 25%;
}
ul a {
    display: block;
    border: 1px solid black;
}
ul li > ul {
    /* float: none; << not needed, as it is positioned absolutely */
    text-align: left;
    width: 70px;
    position: absolute;
    top: 30px;
    left: 10px;
}
ul > li > ul > li {
    text-align: left;
    float: none;
    width: auto;
    background: green;
    display: inline-block;
}