JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <div class="drop">
        <li class="highlight"><a href="#">Home</a></li>
        <li class="menu-item-has-children highlight"><a href="#" class="">HOVER ME!!</a>    
            <div class="drop">
                <ul class="sub-menu">
                    <li class="menu-item-has-children highlight"><a href="#" class="">2nd Level Page</a>
                        <div class="drop">
                            <ul class="sub-menu">		
                                <li class="highlight"><a href="#">3rd Level Page</a></li>
                                <li class="highlight"><a href="#">Another 3rd Level Page</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
    </div>
</ul>

CSS

ul, ol { list-style-type: none; padding: 0 0 0 25px; }
	nav ul { margin: 0; padding: 0; }

.menu	{
		padding: 0;
		margin: 0;
		position: fixed;
		z-index: 9998;
		top:0px;
		bottom:0;
		left:0;
		background: white;
		width: 280px;
	}

/*.menu-item-has-children:hover{
       background: pink;
    .sub-menu > .menu-item-has-children:hover{
       background: pink;
        .sub-menu li:hover {
             background: pink;
        }
}
}*/
.highlight:hover {
             background: pink;
        }

	.menu li {
		height: auto;
		width: 100%;
		list-style: none;
	}

		.menu li a {
			color: #aaa;
			text-transform: uppercase;
			font-size:12px;
			padding: 8px 35px;
			display: inline-block;
			width: 100%;
			border-bottom: 2px solid #f0f0f0;
		}

/*.menu li a:hover,
.menu li a.go { background: pink;  }*/

.menu .drop {
			background: #fff;
			height: 100%;
			z-index: 0;
		}
			.menu .drop li > .drop {	z-index: -1; 	}

			.menu li > .drop {
				width:260px;
				margin: 0;
                background:blue !important;
				padding: 0;
				position:fixed;
				left:-260px;
				top:0;
				bottom:0;
				height: 100%;
				display: block;
			}

			.menu li:hover > .drop { left:260px;}
			.menu li ul li:hover > .drop { left:540px; }

			.menu .drop li .drop > ul {height: 100%;	background-color: #fff;		}

JavaScript

// Menu junk
/*$( ".menu li.menu-item-has-children a, .menu li.menu-item-has-children > .drop" ).mouseover(function() {
    $('.menu li.menu-item-has-children a').addClass('go');
    $('.menu li.menu-item-has-children > .drop a').removeClass('go');
});

$( ".menu li.menu-item-has-children > .drop a" ).mouseover(function() {
    $('.menu li.menu-item-has-children > .drop a').addClass('go');
});

$( ".menu li.menu-item-has-children > *" ).mouseout(function() {
    $('.menu li.menu-item-has-children a').removeClass('go');
});*/