JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navbar">
    <ul class="nav-tabs">
        <li><span>Home</span></li>
        <li id="active"><span>Dogs <div class="arrow-down"></div></span>
            <ul class="sub-menu">
                <li><span>Meet the Breeds<div class="arrow-down"></div></span>
                    <ul class="drop-menu">
                        <li><span>Sort A - Z ~ </span>
                            <ul class="slide-menu">
                                <li>Breeds A - F</li>
                                <li>Breeds G - L</li>
                                <li>Breeds M - R</li>
                                <li>Breeds S - Z</li>
                            </ul>
                        </li>
                        <li><span>Sort by AKC Group ~</span>
                            <ul class="slide-menu">
                                <li>Sporting Group</li>
                                <li>Working Group</li>
                                <li>Herding Group</li>
                                <li>Hound Group</li>
                                <li>Terrier Group</li>
                                <li>Non-Sporting Group</li>
                                <li>Toy Group</li>
                            </ul>
                        </li>
                        <li><span>Sort by Size ~</span>
                            <ul class="slide-menu">
                                <li>X-Small (&le 10in)</li>
                                <li>Small (10in &gt &lt 15in)</li>
                                <li>Medium (15in &ge &lt 21in)</li>
                                <li>Large (21in &ge &lt 28in)</li>
                                <li>X-Large (28in +)</li>
                            </ul>
                        </li>
                        <li><span>Sort by Coat ~</span>
                            <ul class="slide-menu">
                                <li>Very Short/Hairless</li>
                                <li>Short Coat</li>
                           ...

CSS

#navbar {
		display: block;
		clear: both;
		width: 100%;
		height: auto;
		margin: 0px;
		padding: 0%; 
		background-color: #29568F;
		border-bottom: 3px solid #29568F;
	}

	.nav-tabs {
		display: inline-block;
		position: relative;
		width: 100%;
		background: #29568F;
		margin: 0px 0px;
		padding: 0px;
		list-style-type: none;
		color: white;
		text-decoration: none;
		text-shadow: 2px 2px #000000;
		font: 18px arial, verdana, sans-serif;
	}

	.nav-tabs li {
		cursor: pointer;
		float: left;
		padding: 10px 20px;
		text-align: center;
		border-right: 1px solid lightgrey;
	}

	.nav-tabs li:last-child {
		border: 0px;
	}

	.nav-tabs li:hover {
		background-color: #3399CC;
	}

	#active {
		background-color: #3399CC;
	}

	.nav-tabs li a {
		color: white;
		text-decoration: none;
		text-shadow: 2px 2px #000000;
		font: 18px arial, verdana, sans-serif;
	}
	/*
	.arrow-down {
		display: inline-block;
		float: right;
		margin: 8px 0px 0px 8px;
		content: url("/images/arrow-down.png");
	}*/

	<----------Horizontal Sub-Menu----------------------->
	
	.nav-tabs li .sub-menu {
		display: none;
	}
/*
	.nav-tabs li:hover .sub-menu {
		display: block;
	}*/

	.sub-menu {
		display: none;
		z-index: 200;
		width: 100%;
		background-color: #3399CC;
		position: absolute;
		top: 41px;
		left: 0px;
		padding: 0px;
		border-bottom: 3px solid #29568F;
	}

	.sub-menu li{
		list-style-type: none;
		position: relative;
		border: 0px;
		left: 5%;
	}

	.sub-menu li:hover {
		background-color: #C9EAF3;
	}

	.sub-menu li:hover a{
		color: #000000;
		text-shadow: 2px 2px #ffffff;
	}

	<---------------Drop Down Sub-Menu---------------------->
	
	.sub-menu li .drop-menu {
		display: none;
	}
/*
	.sub-menu li:hover .drop-menu {
		display: block;
	}*/

	.drop-menu {
		display: none;
		position: absolute;
		top: 41px;
		left: -3px;
		margin: 0px;
		padding: 0px;
		background-color: #C9EAF3;/*
		width: 120%;*/
		min-width: 220px;
		z-index: 200;
	}

	.drop-menu li {
		border-bottom: 1px solid...

JavaScript

$(document).ready(function(){
		$(".main-tabs span").click(function(){
			var self = $(this).toggleClass('open');
            
            var submenu = self.siblings('ul').slideToggle("fast", function(){
                if (!self.is('.open')){
                    // just closed
                    submenu.find('span+ul').hide();
                };
            });
		});
	});