JSFiddle - React, Tailwind, and code Playground

by onlydimon

HTML

<ul class="h-menu">
    <li><a href="#">First level</a>  
        <div><ul>
            <li><a href="#">Second level</a>
                <ul>
                    <li><a href="#">Third level</a></li>
                    <li><a href="#">Third level</a></li>
                    <li><a href="#">Third level</a></li>
                </ul>
            </li>
            <li><a href="#">Second level</a>
                <ul>
                    <li><a href="#">Third level</a></li>
                    <li><a href="#">Third level</a></li>
                    <li><a href="#">Third level</a></li>
                </ul>
            </li>
            </ul></div>
    </li>           
    <li><a href="#">First level</a>  
        <div><ul>
            <li><a href="#">Second level</a>
                <ul>
                    <li><a href="#">Third level</a></li>
                    <li><a href="#">Third level</a></li>
                    <li><a href="#">Third level</a></li>
                </ul>
            </li>
            <li><a href="#">Second level</a>
                <ul>
                    <li><a href="#">Third level</a></li>
                    <li><a href="#">Third level</a></li>
                    <li><a href="#">Third level</a></li>
                </ul>
            </li>
            </ul></div>
    </li>           
    <li><a href="#">First level</a>  
        <div><ul>
            <li><a href="#">Second level</a>
                <ul>
                    <li><a href="#">Third level</a></li>
                    <li><a href="#">Third level</a></li>
                    <li><a href="#">Third level</a></li>
                </ul>
            </li>
            <li><a href="#">Second level</a>
                <ul>
                    <li><a href="#">Third level</a></li>
                    <li><a href="#">Third level</a></li>
                    <li><a href="#">Third level</a></li>
                </ul>
            </li>
            </ul></div>
    </li>           
    <li><a...

CSS

.h-menu {
    display: table;
    width: 100%;
    position: relative;
    padding: 0px;
}

/* first level */
.h-menu > li {
    display: table-cell;
    vertical-align: middle;
    position: relative;
}
.h-menu > li > a {
    text-align:center;
    text-decoration: none;
    display: block;

    padding: 13px 15px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    line-height:14px;
    background: rgb(252,255,244); /* Old browsers */
    border: 1px solid #ccc;
}

/* second level */
.h-menu > li > div {
    position: relative;
}
.h-menu > li > div > ul {
    display: none;
    position: absolute;
}
.h-menu > li > div > ul.on-right {
    right: 0px;
}
.no-js .h-menu > li:hover > div > ul {
    display: block;
}
.h-menu > li > div > ul > li {
    position: relative;
}
.h-menu > li > div > ul > li > a {
    text-align:left;
    text-decoration: none;
    display: block;

    width: 200px;
    padding: 10px 15px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    line-height:14px;
    color:#000;
    border: 1px solid #ccc;
    background: rgb(246,255,221); /* Old browsers */
}

/* third level */
.h-menu > li > div > ul > li > ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 0px;
}
.h-menu > li > div > ul > li > ul.on-right {
    display: none;
    position: absolute;
    right: 100%;
    left: auto;
    top: 0px;
}
.no-js .h-menu > li > div > ul > li:hover > ul {
    display: block;
}
.h-menu > li > div > ul > li > ul > li {
    position: relative;
}
.h-menu > li > div > ul > li > ul > li > a {
    text-align:left;
    text-decoration: none;
    display: block;

    padding: 13px 15px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    line-height:14px;
    color:#000;

    width: 200px;
    border: 1px solid #ccc;
   background: rgb(254,255,232); /* Old browsers */
}

JavaScript

(function($) {
    $.fn.hMenu = function(options) {
        return this.each(function(){
                       
            var $this = $(this);
            $this.find('li').each(function() {
                if ($(this).has('ul').length > 0) {
                    var curList = $(this);
                    curList.children('a').on('click', function(event) {
                         event.preventDefault();
                         if (!curList.hasClass('opened')) {
                            if (curList.siblings('.opened').length > 0) {                              curList.parent('ul').find('.opened').removeClass('opened').find('ul').hide().removeClass('on-right').removeClass('on-left');
                                                                         }
                            $this.givePosition(curList.find('ul').eq(0));
                            $this.open(curList);
                        }
                        else {
                            $this.close(curList);
                        }
                    })
                }
            })

            // helpers
            $this.open = function(hero) {
                    hero.find('ul').eq(0).fadeIn(150, function() {
                        hero.addClass('opened');
                    })
            }

            $this.close = function(hero) {
                        hero.find('ul').eq(0).fadeOut(150, function() {
                            hero.removeClass('opened');
                            $(this).removeClass('on-right').removeClass('on-left');
                            if (hero.find('li.opened').length > 0) 
                                $this.close(hero.find('li.opened'));
                        })                             
            }

            // positioning
            $this.givePosition = function(hero) {
                var pstn;
                hero.css({'display':'block','visibility':'hidden'});
                if (hero.css('left')) {
                  ...