JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <div class="wrapper">
        <ul id="menu" class="clearfix">
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">About</a>

                <ul>
                    <li><a href="#">History</a>
                    </li>
                    <li><a href="#">The Team</a>
                    </li>
                    <li><a href="#">Our Mission</a>
                    </li>
                </ul>
            </li>
            <li class="cat-show"><a href="#">Categories</a>

                <ul>
                    <li class="purple"><a href="#">Design</a>

                        <ul>
                            <li><a href="#">Photoshop</a>

                                <ul>
                                    <li><a href="#"> Photoshop CS</a>

                                        <ul>
                                            <li>
                                                <img src="m3.jpg" width="200">
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a href="#"> Photoshop 6.1</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">Illustrator</a>

                                <ul>
                                    <li><a href="#">Illustrator 1</a>
                                    </li>
                                    <li><a href="#">Illustrator 2</a>
                                    </li>
                                    <li><a href="#">Illustrator 3</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">InDesign</a>
                            </li>
                        </ul>
                    </li>
                    <li class="green"><a...

CSS

ul, li{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
 
 
 
/** page structure **/
nav {
  display: block;
  width: 100%;
  height: 70px;
  background: #384958;
}
 

#menu {
  display: block;
  position: relative;
  z-index: 99;
  
}

#menu li {
  display: block;
  float: left;
  
}
#menu li a {
  display: block;
  position: relative;
  float: left;
  padding: 0 35px;
  font-size: 1.5em;
  line-height: 70px;
  font-weight: bold;
  text-decoration: none;
  color: #f5f5f5;
}
#menu li a:hover, #menu li a.active {
  background: #fff;
  color: #2c343b;
}

#menu li ul{
  display: none;
  position: absolute;
  top: 70px;
  width: 200px;
  background: #fff;
  z-index: -1;
  -webkit-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
  -moz-box-shadow: 0 2px 7px rgba(0,0,0,0.45);
  box-shadow: 0 2px 7px rgba(0,0,0,0.45);
}
#menu li ul li {
  display: block;
  width: 200px;
}
#menu li ul li a {
  display: block;
  float: none;
  color: #4e5b67;
  font-size: 1.35em;
  line-height: 50px;
  padding: 0 15px;
}
#menu li ul li a:hover {
  background: #384958;
  color: #fff;
}

#menu li ul.expanded {
  width: 400px;
}
#menu li ul.expanded li { margin-right: 200px; }



#menu li ul li ul {
  display: none;
  position: absolute;
  left: 200px;
  top: 0;
  height: 100%;
  background: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
#menu li ul li ul li a { color: #fff; }
#menu li ul li ul li a:hover { text-decoration: underline; }

#menu li ul li.purple a:hover, #menu li ul li.purple a.active { background: #4f4c83; color: #fff; }
#menu li ul li.purple ul { background: #4f4c83; }

#menu li ul li.green a:hover, #menu li ul li.green a.active { background: #65834c; color: #fff; }
#menu li ul li.green ul { background: #65834c; }

#menu li...

JavaScript

$(function () {
    $('a[href="#"]').on('click', function (e) {
        e.preventDefault();
    });

    $('#menu > li').on('mouseover', function (e) {
        $(this).find("ul:first").show();
        $(this).find("ul:first li:first-child ul").show();
        //$(this).find('ul:first li:first-child > a').addClass('active');
    }).on('mouseout', function (e) {
        $(this).find("ul:first").hide();
        $(this).find('> a').removeClass('active');
    });

    $('#menu li li').on('mouseover', function (e) {
        if ($(this).has('ul').length) {
            $(this).parent().addClass('expanded');
        }
        $('ul:first', this).parent().find('> a').addClass('active');
        $('ul:first', this).show();
    }).on('mouseout', function (e) {
        $(this).parent().removeClass('expanded');
        $('ul:first', this).parent().find('> a').removeClass('active');
        $('ul:first', this).hide();
    });
});