JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul class="level-2">
    <li class="has-child"> <a href="/clients/">Clients</a>
      <ul class="sublevel level-3 submenu">
        <li class="nav-item"> <a href="/clients/test1/">Test1</a> </li>
      </ul>
    </li>
    <li class="has-child"> <a href="/services/">Services</a>
      <ul class="sublevel level-3 submenu">
        <li class="nav-item"> <a href="/services/test2/">Test2</a> </li>
      </ul>
    </li>
  </ul>
</nav>

CSS

nav ul li a {
    list-style: none;
    color: #cccccc;
}

.submenu {
	display:none;
    position:fixed;
    left: -120px;
    top:0;
    width:200px;
    height:100%;
    background: #3a4247 none repeat scroll 0 0;
	z-index: -1;
	filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}

nav .has-child:hover > .sublevel {
	display: block;
}

JavaScript

$(document).ready(function () {
	$('.level-2 li').on({
		mouseenter: function () {
			$('.submenu').stop().animate({ 'margin-left':"300px" }, 1000);
		},
		mouseleave: function () {
			$('.submenu').stop().animate({ 'margin-left':"-200px" }, 1000);
		}
	});
});