JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menuContainer">
    <div class="ctrContainer">
        <div id="mainMenu">
            <ul role="navigation">
                <li class="cataDropDown clearfix"> <a href="/shop.aspx">Products</a>

                    <ul>
                        <li>
                            <ul>
                                <li><a href="Javasrcript:">Product 1</a>
                                </li>
                                <li><a href="/products/productList.aspx?uid=2">Kid's Flannel</a>
                                </li>
                                <li><a href="/products/productList.aspx?uid=3">Flannel Stars</a>
                                </li>
                                <li><a href="/products/productList.aspx?uid=4">Baby Flannel</a>
                                </li>
                                <li><a href="/products/productList.aspx?uid=8">Covers</a>
                                </li>
                                <li><a href="/customize.aspx">Custom Features</a>
                                </li>
                                <li><a href="Javasrcript:">Product 1</a>
                                </li>
                                <li><a href="/products/productList.aspx?uid=2">Kid's Flannel</a>
                                </li>
                                <li><a href="/products/productList.aspx?uid=3">Flannel Stars</a>
                                </li>
                                <li><a href="/products/productList.aspx?uid=4">Baby Flannel</a>
                                </li>
                                <li><a href="/products/productList.aspx?uid=8">Covers</a>
                                </li>
                                <li><a href="/customize.aspx">Custom Features</a>
                                </li>
                                <li><a href="Javasrcript:">Product 1</a>
                                </li>
                                <li><a...

CSS

/** Main Menu **/
#mainLogo {
    position: absolute;
    left: 1px;
    top: -20px;
    width: 171px;
    z-index: 1001;
}
#menuContainer {
    background-color: #f5f5f5;
    border-bottom: 1px solid #CCC;
    border-top: 1px solid #CCC;
    box-shadow: inset 0 0 24px rgba(0, 0, 0, .05);
    height: 27px;
    margin-top: 10px;
    max-width: 100%;
    padding: 3px 0 6px 0;
    min-width: 1080px;
    z-index: 0;
}
#mainMenu {
    position: relative;
    width: 960px;
    z-index: 2;
}
#mainMenu ul {
    list-style-type: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
    z-index: 2;
    width: 962px;
}
#mainMenu > ul > li {
    display: inline-block;
    float: left;
    font-size: .9em;
}
#mainMenu > ul > li > a {
    background: #F7F9EF;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #F7F9EF 0%, #DFE5D7 16%, #B7B7B7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F7F9EF), color-stop(16%,#DFE5D7), color-stop(100%,#B7B7B7));
    background: -webkit-linear-gradient(top, #F7F9EF 0%,#DFE5D7 16%,#B7B7B7 100%);
    background: -o-linear-gradient(top, #F7F9EF 0%,#DFE5D7 16%,#B7B7B7 100%);
    background: -ms-linear-gradient(top, #F7F9EF 0%,#DFE5D7 16%,#B7B7B7 100%);
    background: linear-gradient(to bottom, #F7F9EF 0%,#DFE5D7 16%,#B7B7B7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9ef', endColorstr='#b7b7b7',GradientType=0 );
    
    border-right: 1px solid #888;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
    color: #2C2C2C;
    display: block;
    padding: 6px 0;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    width: 191px;
}
#mainMenu > ul > li > a:hover {
    background: #f7f9ef; /* Old browsers */
    /* IE9 SVG, needs conditional override of...

JavaScript

/** Mega DropDown **/
    /* Determine if the user is hovering over the trigger for more than .5sec and if there is already a drop-down menu showing. 
    If there is then modify the containing elements height to match the new contained elements and if not then set the 
    containing element to the correct height */
    $(".cataDropDown").mouseenter(function () {
        $this = $(this); //use currently selected ".cataDropdown"

        var EleHt = ($this.children('ul').height()) + 29; //Get height of contained elements for slide event
        var count = 0;
        var onHoverTimer = setInterval(function () {
            count += 1; //setInterval for hover timer

            //If User hovers over trigger for more than .5 seconds - 
            if (count >= 1) {
                clearInterval(onHoverTimer); //Clear counter
                onHoverTimer = setInterval(300);

                $(".cataDropDown").children('ul').animate({ opacity: '0' }, 200).hide(); //Give contained elements dimension but keep hidden with opacity property
                $this.children('ul').show().css('opacity', '0'); //Give contained elements dimension but keep hidden with opacity property
                $this.parents('div#menuContainer').stop(true, false).animate({ height: EleHt }, 400); //Open container to height of contained elements
                $this.children('ul').stop(true, true).animate({ opacity: '1' }, 200); //show child elements (menu)
                $this.addClass('menu-active') //add class "menu-active" to test if the drop-down is currently open
            }
        }, 300);

        $(".cataDropDown").mouseleave(function () {
            clearInterval(onHoverTimer); //Clear counter to prevent opening the menu by accident
            onHoverTimer = setInterval(300);

            if (!$this.hasClass('menu-active')) {
                $(".cataDropDown").removeClass('menu-active');
                $this.parents('div#menuContainer').stop().animate({ height: '27px' },...