JSFiddle - React, Tailwind, and code Playground

HTML

<div id="topMenu"></div>
    	<nav>
    		<ul>
    			<li><a href="">Link</a></li>
    			<li class="has_children"><a href="">Link</a>
    				<ul class="sub-menu">
    					<li><a href="">Link 1</a></li>
    					<li><a href="">Link 2</a></li>
    					<li><a href="">Link 3</a></li>
    					<li><a href="">Link 4</a></li>
    					<li><a href="">Link 5</a></li>
    					<li><a href="">Link 6</a></li>
    					<li><a href="">Link 7</a></li>
    				</ul>
    			</li>
    			<li class="has_children"><a href="">Link</a>
    				<ul class="sub-menu">
    					<li><a href="">Link 1</a></li>
    					<li><a href="">Link 2</a></li>
    					<li><a href="">Link 3</a></li>
    					<li><a href="">Link 4</a></li>
    					<li><a href="">Link 5</a></li>
    					<li><a href="">Link 6</a></li>
    					<li><a href="">Link 7</a></li>
    				</ul>
    			</li>
    			<li class="has_children"><a href="">Link</a>
    				<ul class="sub-menu">
    					<li><a href="">Link 1</a></li>
    					<li><a href="">Link 2</a></li>
    				</ul>
    			</li>
    			<li><a href="">Link</a></li>
    			<li><a href="">Link</a></li>
    			<li><a href="">Link</a></li>
    		</ul>
    	</nav>

CSS

body {
    padding: 0;
    margin: 0;
    }

    #topMenu {
    height: 50px;
    width: 100%;
    background-color: #cde;
    display: block;
    }

    nav {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
    }

    nav a {
    text-decoration: none;
    padding-left: 40px;
    padding: 20px 40px;
    display: block;
    }

    nav ul {
    list-style: none;
    display: block;
    margin: 0;
    padding: 0;
    background-color: #ccc;
    } 

    nav ul li {
    display: block;
    width: 100%;
    border-top: 2px solid #abc;
    }

    nav ul ul {
    overflow: hidden;
    padding-top: 0px;
    }

    nav ul ul li a {
    padding-left: 100px;
    }

    ul.sub-menu{
        display: none;
    }
.has_children > a{
    color: #ddd;
}

JavaScript

var $menu_with_children = $('.has_children > a');

    $menu_with_children.on('click', function(e){
        e.preventDefault();
        var $this = $(this);
        if (!$this.parent().find('> .sub-menu').hasClass('visible')) {
            $this.parent().find('> .sub-menu').addClass('visible').slideDown('slow');
        } else{
            $this.parent().find('> .sub-menu').removeClass('visible').slideUp('slow');
        }
    });