JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
    <li class="parent"><a class="nav-top" href="#">Web Design</a>
        <ul class="sub-nav">
            <li><a class="nav-top" href="#">Self Storage Websites</a></li>
            <li><a class="nav-top" href="#">Responsive Websites</a></li>
        </ul>
    </li>
    <li class="parent"><a class="nav-top" href="#">Internet Marketing</a>
        <ul class="sub-nav">
            <li><a class="nav-top" href="#">Real SEO</a></li>
            <li><a class="nav-top" href="#">PPC (Pay Per Click) Ads</a></li>
            <li><a class="nav-top" href="#">Social Media Marketing</a></li>
        </ul>
    </li>
    <li class="parent"><a class="nav-top" href="hosting.html">Website Hosting</a></li>
    <li class="parent"><a class="nav-top" href="#">About Us</a>
        <ul class="sub-nav">
            <li><a class="nav-top" href="#">About EiD</a></li>
            <li><a class="nav-top" href="#">Careers</a></li>
        </ul>
    </li>
    <li class="parent"><a class="nav-top" href="hosting.html">Contact Us</a></li>
</ul>

CSS

#fat_nav {
    padding: 0;
    text-align: right;
}

.fatnav_header ul,
.fatnav_header li {
    box-sizing: border-box;
    list-style: none;
    padding: 0;
    margin: 0;
}

#nav li {
    padding: 0;
    line-height: 48px;
    width: 100%;
    text-align: center;
    /*text-transform: uppercase;*/
    font-weight: 400;
    color: #fff;
    white-space: nowrap;
}

.sub-nav {
    background: #e2e;
    display: block;
    overflow: hidden;
}

#nav ul.sub-nav {
    display: none;
}

#nav ul.visible {
    display: block;
}

JavaScript

$(document).ready(function() {
    $('.parent').click(function() {
        $('.sub-nav').toggleClass('visible');
    });
});