JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
    <ul>
        <li><a href="#">Menu Item 1</a></li>
        <li><a href="#">Menu Item 2</a></li>
        <li><a href="#">Menu Item 3</a>
            <ul>
                <li><a href="#">Submenu Item 2</a></li>
                <li><a href="#">Submenu Item 2</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

.menu ul {
    width: 100%;
    display: block;
}

.menu ul li {
    display: inline;
    list-style-type; none;
}

.menu ul ul {
    display: none;
}

.menu ul li:hover > ul {
    display: block;
}