JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">
<ul>
    <li>
        First list
        <ul>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </li>
    <li>
        Second list
        <ul>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </li>
</ul>
</div>

CSS

#navigation {
    line-height:30px;
    height:30px;
    clear:left;
    text-align:left;
    position:relative;
}

#navigation li {
    padding:0 5px;
    margin-left:-1px;
    width:100px;
    text-align:center;
    float:left;
    display:inline;
}

#navigation ul ul {
    display:block;
    position:absolute;
}

#navigation li ul {
    margin-left:-5px;
    padding-right:10px;
}

#navigation li ul li {
    margin-right:-2px;
    text-align:left;
    line-height:15px;
    padding:5px;
    clear:both;
    width:100%;
}

#navigation ul li {
    list-style:none;
}

#navigation ul li {
    float:left;
    list-style:none;
}

#navigation li ul {
    display:none;
}

#navigation li:hover ul {
    display:block;
}

#navigation a {
    font-size: 0.8em;
}

#navigation li li a {
    display:block;
    margin-left:10px;
    text-indent:-10px;
}