JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li>Parent 1
            <ul>
                <li>Child 1</li>
                <li>Child 2</li>
                <li>Child 3</li>
            </ul>
        </li>
        <li>Parent 2
            <ul>
                <li>Child 4</li>
                <li>Child 5</li>
                <li>Child 6</li>
            </ul>
        </li>
    </ul>
</nav>

CSS

nav > ul > li {
    clear: left;
    position: relative;
}

nav > ul > li ul {
     display: none;   
}

nav > ul > li:hover ul {
    display: block;
}

nav > ul > li ul {
    position: absolute;
    left: 100px;
    top: 0;
}


nav > ul > li ul li {
    float: left;
    display: inline-block;
}