JSFiddle - React, Tailwind, and code Playground

HTML

<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="">sub item 1</a></li>
            <li><a href="">sub item 2</a></li>
            <li><a href="">sub item 3</a></li>
        </ul>
    </li>
</ul>

CSS

ul li {
    float:left;
    position:relative;
}
ul > li > a {
    text-decoration:none;
    color:#000;
    display:inline-block;
    padding:18px 10px;
    position:relative;
    font-size:1.1em;
}
ul ul {
    position:absolute;
    white-space:nowrap;
    top:100%;
    left:16px;
    background-color:#15709d;
    display:none;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    box-shadow:0 2px 2px rgba(0, 0, 0, 0.4);
}
ul > li:hover > ul {
    display:block;
}

ul ul li {
    float:none;
    display:inline-block;
}