JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="main-nav">
    <li><a href="#">main nav-1</a> 
    </li>
    <li><a href="#">main nav-2</a> 
        <ul class="sub-nav">
            <li><a href="#">sub-nav-2.1</a>
            </li>
            <li><a href="#">sub-nav-2.2</a>
            </li>
            <li><a href="#">sub-nav-2.3</a>
            </li>
        </ul>
        </div>
    </li>
    <li><a href="#">main nav-3</a>

        <li><a href="#">main nav-4</a> 
</ul>

CSS

* {
    margin:0;
    padding:0;
}
ul {
    list-style:none;
}
ul.main-nav > li {
    position: relative;
    display: block;
    float: left;
    margin: 0 15px;
}
ul.main-nav > li > a {
    display: block;
    line-height: 40px;
}
ul.sub-nav {
    display:none;
    position: absolute;
    top: 40px;
    left: 0;
    min-width: 200px;
}
ul.main-nav > li:hover ul.sub-nav {
    display: block;
    z-index: 999;
}