JSFiddle - React, Tailwind, and code Playground

by vals

HTML

<ul id="navbar" class="drop">
    <li><a href="story.php">ABOUT US</a>
        <ul>
            <li><a id="storynav" href="story.php">OUR STORY</a></li>
            <li><a id="meetusnav" href="meetus.php">MEET US</a></li>
            <li><a id="valuesnav" href="values.php">MISSION & VALUES</a></li>
            <li><a id="faqnav" href="faq.php">FAQs</a></li>
            <li><a id="contactnav" href="contact.php">CONTACT</a></li>
        </ul>
    </li>
    <li><a id="joinusnav" href="joinus.php">JOIN US</a></li>
    <li><a id="eventsnav" href="events.php">EVENTS</a></li>
    <li><a id="shopnav" href="shop.php">SHOP</a></li>
</ul>

CSS

#navbar {
    position: relative;
    top: 60px;
    left: 60px;
    width: 600px;
}

.drop {
    position: relative;
    z-index: 597;
    float: left;
}

.drop a {
    display: block;
    font: bold 15px verdana;
    color: #383838;
    text-align: center;
    textshadow: 0 1px 3px #808080;
}

.drop li {
    display: inline;
    float: left;
}

.drop ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 598;
}

.drop li ul:hover, .drop li ul.hover {
    position: relative;
    display: inline;
    width: 100%;
    z index: 599;
    cursor: default;
}

.drop ul a {
    font-size: 13px;
}

.drop li:hover > ul {
    visibility: visible;
}