JSFiddle - React, Tailwind, and code Playground

HTML

<body>
 <ul>
<li>First</li>
<li>
Second
<ul>
<li>Third</li>
</ul>
</li>
<li>Fourth</li>
</ul>
</body>

CSS

ul{
    width:350px;
    height:50px;
    padding-left:0;
    margin:0;
    background:#CCCCCC;
    }
    ul > li{
    list-style:none;
    display:inline;
    padding:10px 20px;
    font-size:24px;
    float:left;
    position: relative;
    }
    ul > li > ul{
    margin:10px 0px;
    padding-left:0;
    width:80px;
    height:40px;
    display:none;
    position:absolute;
    }
    ul > li > ul > li{
    display:block;
    list-style-type:none;
    padding-left:10px;
    }
    ul > li:hover ul{
    display:block
    }