JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul class="menu">
        <li class="active">
            <a href="#">link 1</a>
            <ul>
                <li><a href="#">link 1-1</a></li>
                <li><a href="#">link 1-2</a></li>
                <li><a href="#">link 1-3</a></li>
                <li><a href="#">link 1-4</a></li>
                <li><a href="#">link 1-5</a></li>
            </ul>
        </li>
        <li>
            <a href="#">link 2</a>
            <ul>
                <li><a href="#">link 2-1</a></li>
                <li><a href="#">link 2-2</a></li>
                <li><a href="#">link 2-3</a></li>
                <li><a href="#">link 2-4</a></li>
                <li><a href="#">link 2-5</a></li>
            </ul>
        </li>
        <li>
            <a href="#">link 3</a>
            <ul>
                <li><a href="#">link 3-1</a></li>
                <li><a href="#">link 3-2</a></li>
                <li><a href="#">link 3-3</a></li>
                <li><a href="#">link 3-4</a></li>
                <li><a href="#">link 3-5</a></li>
            </ul>
        </li>
        <li>
            <a href="#">link 4</a>
            <ul>
                <li><a href="#">link 4-1</a></li>
                <li><a href="#">link 4-2</a></li>
                <li><a href="#">link 4-3</a></li>
                <li><a href="#">link 4-4</a></li>
                <li><a href="#">link 4-5</a></li>
            </ul>
        </li>
        <li>
            <a href="#">link 5</a>
            <ul>
                <li><a href="#">link 5-1</a></li>
                <li><a href="#">link 5-2</a></li>
                <li><a href="#">link 5-3</a></li>
                <li><a href="#">link 5-4</a></li>
                <li><a href="#">link 5-5</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

nav {
    position: relative
}
.menu {
    display: inline-block;
    vertical-align: top;
}
.menu li {
    float: left;
    background: #1e4467;
    border: 1px solid #fff;
    padding: 10px;
}
.menu ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    display: none;
    background: #1e4467;
}
.menu li.active ul,
.menu:hover li:hover ul,
.menu:hover li.active:hover ul {
    display: block;
}
.menu:hover li.active ul {
    display: none;
}
a {
    color: #fff;
}