JSFiddle - React, Tailwind, and code Playground

by Neeraj Sonar

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="#">Business Process</a>

                <ul>
                    <li class="back-g"><a href="#">Leadership</a>

                        <ul>
                            <li><a href="#">Leadership 1 </a>

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

                                        <ul>
                                            <li>
                                                <img src="m3.jpg" width="200">
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a href="#"> Leadership 1.1</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">Leadership 2</a>

                                <ul>
                                    <li><a href="#">Leadership 1</a>
                                    </li>
                                    <li><a href="#">Leadership 2</a>
                                    </li>
                                    <li><a href="#">Leadership 3</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">Leadership 3</a>

                                <ul>
                                    <li> <a href="#"> In Leadership 3 </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;
 }
 #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 15px;
     font-size: 16px;
     line-height: 35px;
     text-decoration: none;
     color: #3C5A99;
     font-family: sans-serif;
 }
 #menu li a:hover, #menu li a.active {
     background: #94A6CE;
     color: #fff;
 }
 #menu li ul {
     display: none;
     position: absolute;
     top: 35px;
     width: 200px;
     background: #94A6CE;
     z-index: -1;
 }
 #menu li ul li {
     display: block;
     width: 200px;
 }
 #menu li ul li a {
     display: block;
     float: none;
     color: #FFFFFF;
     font-size: 16px;
     line-height: 30px;
     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: none;
 }
 #menu li ul li.back-g a:hover, #menu li ul li.back-g a.active {
     background: #9eaed2;
     color: #0E3070;
 }
 #menu li ul li.back-g ul {
     background: #94A6CE;
 }

JavaScript

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

    $('#menu > li').on('mouseover', function (e) {
        $(this).find("ul:first").show();
        $(this).find("ul > li:first > ul:first").show();
        $(this).find("ul > li:first > ul:first > li:first > ul:first").show();
        $(this).find("ul > li:first > ul:first > li:first > ul:first > li:first > ul:first").show();

        $(this).find('> 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();

        $(this).find("ul > li:first > ul:first").show();
        $(this).find("ul > li:first > ul:first > li:first > ul:first").show();
        $(this).find("ul > li:first > ul:first > li:first > ul:first > li:first > ul:first").show();

    }).on('mouseout', function (e) {
        $(this).parent().removeClass('expanded');
        $('ul:first', this).parent().find('> a').removeClass('active');
        $('ul:first', this).hide();
    });
});