JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
    <div class="drop">
        <li ><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>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></li>
        <li class="highlight"><a href="#">Link</a></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 ; }
	nav ul { margin: 0; padding: 0; }

.menu	{
    padding: 0;
    margin: 0;
    position: fixed;
    z-index: 9998;
    top:0;
    bottom:0;
    left:0;
    background: white;
    width: 280px;
    
    /* THIS IS NOT WORKING - HOW CAN I GET THIS WORKING? */
    overflow-y: scroll;
    overflow-x: visible;
}


.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 .drop {
    background: blue;
    height: 100%;
    z-index: 0;
    -webkit-box-shadow: 10px 0px 43px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 10px 0px 43px 0px rgba(0,0,0,0.15);
    box-shadow: 10px 0px 43px 0px rgba(0,0,0,0.15);
}
.menu .drop li > .drop {	z-index: -1; 	}

.menu li > .drop {
    width:280px;
    margin: 0;
    background:red ;
    padding: 0;
    position:fixed;
    left:-280px;
    top:0;
    bottom:0;
    height: 100%;
    display: block;

    -webkit-transition: all .45s cubic-bezier(.77,0,.175,1);
    -moz-transition: all .45s cubic-bezier(.77,0,.175,1);
    -ms-transition: all .45s cubic-bezier(.77,0,.175,1);
    transition: all .45s cubic-bezier(.77,0,.175,1);
}

.menu li:hover > .drop { left:280px; }
.menu li ul li:hover > .drop { left:560px; }

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

.menu .drop li ul li > .drop ul {
			-webkit-box-shadow: inset 10px 0px 43px 0px rgba(0,0,0,0.15);
			-moz-box-shadow: inset 10px 0px 43px 0px rgba(0,0,0,0.15);
			box-shadow: inset 10px 0px 43px 0px rgba(0,0,0,0.15); }