JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
    <li><a href="#">MEMU1</a>

    </li>
    <li><a href="#">MENU2</a>

        <ul class="nab-sub">
            <li><a href="#">MENU2a</a>

                <ul class="#">
                    <li><a href="#">MENU2b</a>

                    </li>
                    <li><a href="#">MENU2c</a>

                    </li>
                    <li><a href="#">MENU2d</a>

                    </li>
                    <li><a href="#">MENU2e</a>

                    </li>
                    <li><a href="#">MENU2f</a>

                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">MENU3</a>

    </li>
</ul>

CSS

* {
    margin:0;
    padding:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.nav {
    list-style:none;
    text-align: center;
    height: 30px;
}
.nav li {
    position: relative;
    float: left;
    border: 1.5px solid #FFF;
    list-style:none;
}
.nav li a {
    width: 125px;
    height: 30px;
    display: block;
    line-height: 30px;
    text-decoration: none;
    font-size: 12px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    color: #000;
    background-color: #999;
}
.nav li:hover > a {
    color:#fff;
    background-color:#333;
}
.nav li ul {
    height: 30px;
    width:auto;
    position: absolute;
    top:100%;
    border: 1.5px solid #FFF;
}
.nav li:hover ul {
    display: block;
}
.nav li li:hover > a {
    color:#000;
    background-color:#999;
}
.