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(){ 

        $(".nav-tabs span").click(function(){

            //finds the immediate span child of .nav-tabs with a class of Open
            var tab = $("#navbar .nav-tabs > span.open");
            //finds all .nav-tabs span children, with or without class of open
            var next-tab = $("navbar .nav-tabs > span")
            // THIS clicked element and toggles a class of Open
            var menu = $(this).toggleClass("open");

            // If -THIS- tab is -NOT- the parent of -THIS- menu:
            if (!tab.children(this)) {
                tab.removeClass("open");
                // this next line may not be neccessary . . .
                this.parents($next-tab).addClass("open");
            }
            // Toggles span's UL sibling (the submenu)
            var sub-menu = $menu.siblings("ul").toggle("fast", function(){

                // If a different tab is clicked, or any menu closed 
                // OR if the mouse leaves the 1st .nav-tabs - 

                // all submenus beneath it close.
                if(!$tab.is("open") && !$menu.is("open") && $menu.onMouseOut()){
                    $sub-menu.find("span + ul").hide();
                }
            });

        });

    });