JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li id="trigger"><a href="#" title="#">Mainitem 1</a></li>
        <ul>
            <li><a href="#">Subitem 1</a></li>
            <li><a href="#">Subitem 2</a></li>
            <li><a href="#">Subitem 3</a></li>
        </ul>
    <li><a href="#" title="#">Mainitem 2</a></li>
</ul>

CSS

/* submenu items */
ul ul {
    background: grey;
}

ul ul {
    display: none;
}

/* trigger */
#trigger {
    background: blue;
}

#trigger:hover ul ul {
    display: block;
}