JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav-list" id="navigation">
    <!--Menu list-->
    <li><a href="index.html">Home</a>
    </li>
    <li><a href="about.html">About Us</a>
    </li>
    <li>
        <a href="members.html">Members</a>
        <ul>
            <li><a href="board.html">Board of Directors</a>
            </li>
            <li><a href="committee.html">Committee</a>
            </li>
        </ul>
    </li>
    <li><a href="join.html">Join Us</a>
    </li>
    <li><a href="events.html">Events</a>
    </li>
    <li><a href="rules.html">Rules &amp; Guidelines</a>
    </li>
    <li><a href="archive.html">Archive</a>
    </li>
    <li><a href="contact.html">Contact Us</a>
    </li>
    <li><a href="#">Login</a>
    </li>
</ul>
<!--ENDS Menu list-->

CSS

/* NAVIGATION */
 .nav-bar {
    width: 100%;
    height: 80px;
    background-image:url(../images/bg-menu80.jpg);
}
.nav-hold {
    overflow: hidden;
}
.nav-list {
    float: right;
    list-style: none;
    background: #e0e0e0;
}
.nav-list li {
    float: left;
    width: auto;
    position: relative;
}
.nav-list li a {
    text-decoration: none;
    display:block;
    padding: 30px 7px 20px 7px;
    color: #f9f9f9;
    font-size: .9em;
    font-weight: bold;
}
.nav-list li ul {
    
    list-style: none;
    position: absolute;
    margin: 0;
    padding: 0;
}
.nav-list li:hover ul {
    display: block;
}
.nav-list li a:hover li {
    float: left;
}
.nav-list li:hover li a {
    background-color: #333;
    border-bottom: 1px solid #fff;
    color: #FFF;
}
.nav-list li a:hover {
    text-decoration: none;
    display: block;
    padding: 30px 7px 20px 7px;
    color: #000;
    font-size: .9em;
    font-weight: bold;
    background-color: #e7e4e4;
}