JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<div style="width:200px">
    <ul class="menu_vert">
        <li><a href="#">Clickable link</a>
            <ul>
                <li><a href="#">Clickable link</a>
                    <ul>
                        <li><a href="#">Clickable link</a>
                            <ul>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Clickable link</a>
                            <ul>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Clickable link</a>
                            <ul>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                                <li><a href="#">Clickable link</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Clickable link Clickable link</a>
                    <ul>
                        <li><a href="#">Clickable link</a></li>
                        <li><a href="#">Clickable link</a></li>
                        <li><a href="#">Clickable link</a></li>
                    </ul>
                </li>
                <li><a href="#">Clickable link</a></li>
                <li><a href="#">Clickable link</a>
                    <ul>
                        <li><a href="#">Clickable link</a></li>
                        <li><a href="#">Clickable link</a></li>
                        <li><a href="#">Clickable...

CSS

/*layout css*/
body,html { min-height:100%; padding:0; margin:0}
body { font:12px/1.2em Arial, Helvetica, sans-serif; color:#999; padding:0; margin:0;}


/*bind css (not edit)*/
.menu_vert {margin: 0; padding: 0; position: relative; word-spacing: -0.25em; }
.menu_vert li {border-bottom:1px solid #E8E8E8;  display:block; list-style: none; margin: 0; padding: 0; text-align: left; vertical-align: top; word-spacing: normal; zoom: 1; }
.menu_vert>li:last-child { border:0} 
.menu_vert a {color: #666; display: block; font: 12px/1.2em Arial, Helvetica, sans-serif; padding: 10px 20px 10px 10px; text-align: left; text-decoration: none; position:relative }
.menu_vert a:hover { background: #eee; color: #000; text-decoration: none; text-shadow: 0 1px 0 #fff; }
.menu_vert .active { background: #eee; color: #000; }
.menu_vert ul li { display: block; list-style: none; margin: 0; padding: 0;  border:0;}
.menu_vert ul a { display: block; border-radius: 5px;  }
.menu_vert ul { background: #fff; border: 1px solid #c2c2c2; border-radius: 5px; box-shadow: 0 5px 10px rgba(0,0,0,0.2); top: 0; display: none; left: 0; margin: 0; //margin: 1px 0 0 0;padding: 0; position: absolute; top: 0; z-index:2}
.arrow-left { border-bottom: 5px solid transparent; border-right: 5px solid #fff; border-top: 5px solid transparent; height: 0; left: -4px; position: absolute; top: 0; width: 0; z-index: 1; }
.arrow-left2 { border-bottom: 5px solid transparent; border-right: 5px solid #c2c2c2; border-top: 5px solid transparent; height: 0; left: -5px; position: absolute; top: 0; width: 0; z-index: 0; }
.toLeft .arrow-left { border-left: 5px solid #fff; border-right: 0; left: auto; right: -4px; }
.toLeft .arrow-left2 { border-left: 5px solid #c2c2c2; border-right: 0; left: auto; right: -5px; }
.arrow-right {width: 0; height: 0; border-top: 4px solid transparent;border-bottom: 4px solid transparent;    border-left: 4px solid #666; position:absolute; top:13px; right:8px;}

/*user css (this edit)*/
.menu_vert...

JavaScript

$(function(){
    /*плагин*/
    (function($){
	$.fn.liMenuVert = function(params){
		return this.each(function(){
			var 
			menuWrap = $(this),
			menuWrapWidth = menuWrap.outerWidth(),
			menuWrapLeft = menuWrap.offset().left,
			menuSubSub = $('ul',menuWrap),
			mFuncId = function(){};
			
			menuSubSub.each(function(){
				var 
				mArrowRight = $('<div>').addClass('arrow-right'),
				mSubSub = $(this),
				mSubList = mSubSub.closest('li'),
				mSubLink = mSubList.children('a').append(mArrowRight),
				mSubArrow = $('<div>').addClass('arrow-left').prependTo(mSubSub),
				mSubArrow2 = $('<div>').addClass('arrow-left2').prependTo(mSubSub);
				
				mSubLink.on('mouseenter',function(){
					mHoverLink = $(this);
					mFuncId = setTimeout(function(){
						mHoverLink.next('ul').children('li').width(mHoverLink.next('ul').width());	//correct width in ie7			
						mSubArrow.css({top:mSubLink.outerHeight()/2 - 5});
						mSubArrow2.css({top:mSubLink.outerHeight()/2 - 5});
						var 
						mSubSubLeft = mSubLink.position().left + mSubLink.outerWidth(),
						p1 = (mSubLink.closest('ul').outerWidth()-mSubLink.closest('ul').width())/2;
						mSubSub.css({top:(mSubLink.position().top - p1)});	
						mSubSub.css({left:mSubSubLeft});
						mSubSub.show();
						var w3 = $(window).width();
						var w6 = (mSubSub.offset().left + mSubSub.outerWidth());
						if(w6 >= w3){
							mSubSub.closest('ul').addClass('toLeft');
							mSubSubLeft = -mSubSub.outerWidth();
						}
						if(mSubSub.parents('ul').hasClass('toLeft')){
							mSubSubLeft = -mSubSub.outerWidth();
						}
						mSubSub.css({left:mSubSubLeft});				
						mSubLink.addClass('active');
					},300)
				})
				mSubList.on('mouseleave',function(){
					clearTimeout(mFuncId);
					mSubSub.hide();
					mSubLink.removeClass('active')
				});
			});
			menuWrapWidth = menuWrap.outerWidth();
			menuWrapLeft = menuWrap.offset().left;
			$(window).resize(function(){
				menuWrapWidth =...