JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <li>
        item1
        <ul>
            <li><a href="#">subitem1</a></li>
            <li><a href="#">subitem2</a></li>
            <li><a href="#">subitem3</a></li>
            <li><a href="#">subitem4</a></li>
            <li>
                item2
                <ul>
                    <li><a href="#">subitem5</a></li>
                    <li><a href="#">subitem6</a></li>
                    <li><a href="#">subitem7</a></li>
                    <li><a href="#">subitem8</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

.menu li > ul {
    display:none;
}

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