JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul id="nav">
        <li><a href="#">Electronics</a>

            <ul>
                <li><a href="http:/www.google.com/search?q=design+cartoons+animation">Cartoons</a>
                </li>
                <li><a href="http:/www.google.com/search?q=design+comic+strips+inspiration">Comic Strips</a>
                </li>
                <li><a href="http:/www.google.com/search?q=how+to+clip+video+footage">Video Clips</a>
                </li>
                <li><a href="http:/www.google.com/search?q=design+create+animated+gifs">Web GIFs</a>
                </li>
                <li><a href="http:/www.google.com/search?q=design+create+animated+gifs">Web GIFs</a>
                </li>
                <li><a href="http:/www.google.com/search?q=design+create+animated+gifs">Web GIFs</a>
                </li>
                <li><a href="http:/www.google.com/search?q=design+create+animated+gifs">Web GIFs</a>
                </li>
                <li><a href="http:/www.google.com/search?q=design+create+animated+gifs">Web GIFs</a>
                </li>
                <li><a href="http:/www.google.com/search?q=design+create+animated+gifs">Web GIFs</a>
                </li>
                <li><a href="http:/www.google.com/search?q=design+create+animated+gifs">Web GIFs</a>
                </li>
                <li><a href="http:/www.google.com/search?q=design+create+animated+gifs">Web GIFs</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Home Appliances</a>

            <ul>
                <li><a href="http:/www.google.com/search?q=photoshop+tutorials+graphics+design">Adobe Photoshop</a>
                </li>
                <li><a href="http:/www.google.com/search?q=digital+branding+graphics+logos">Branding &amp; Logos</a>
                </li>
                <li><a href="http:/www.google.com/search?q=graphics+design+marketing">Digital Marketing</a>
                </li>
                <li><a...

CSS

li {
    listy-type-style:none;
}
#nav {
    float: left;
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    border-left: 1px solid #999;
}
#nav li a {
    width: 200px;
    display: block;
    padding: 10.7px;
    background:#ccc;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #999;
    border-width:0.2px;
    text-decoration: none;
    color: #000;
}
#nav li a:hover, #nav li a.active {
    background: #999;
    color: #fff;
}
#nav li ul {
    display: none;
    // used to hide sub-menus
}
#nav li ul li a {
    padding: 10px;
    background:#C01F25;
    opacity:0.4;
    border-bottom: 0.1px solid red;
}

JavaScript

$(document).ready(function () {
    $("#nav > li > a").on("mouseover", function (e) {
        if ($(this).parent().has("ul")) {
            e.preventDefault();
        }

        if (!$(this).hasClass("open")) {
            // hide any open menus and remove all other classes
            $("#nav li ul").slideUp(350);
            $("#nav li a").removeClass("open");


            // open our new menu and add the open class
            $(this).next("ul").slideDown(350);
            $(this).addClass("open");

        } else if ($(this).hasClass("open")) {
            $(this).removeClass("open");
            $(this).next("ul").slideUp(350);
        }
    });
});

(function ($) {

    var types = ['DOMMouseScroll', 'mousewheel'];

    if ($.event.fixHooks) {
        for (var i = types.length; i;) {
            $.event.fixHooks[types[--i]] = $.event.mouseHooks;
        }
    }

    $.event.special.mousewheel = {
        setup: function () {
            if (this.addEventListener) {
                for (var i = types.length; i;) {
                    this.addEventListener(types[--i], handler, false);
                }
            } else {
                this.onmousewheel = handler;
            }
        },

        teardown: function () {
            if (this.removeEventListener) {
                for (var i = types.length; i;) {
                    this.removeEventListener(types[--i], handler, false);
                }
            } else {
                this.onmousewheel = null;
            }
        }
    };

    $.fn.extend({
        mousewheel: function (fn) {
            return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
        },

        unmousewheel: function (fn) {
            return this.unbind("mousewheel", fn);
        }
    });


    function handler(event) {
        var orgEvent = event || window.event,
            args = [].slice.call(arguments, 1),
            delta = 0,
            returnValue = true,
            deltaX = 0,
        ...