JSFiddle - React, Tailwind, and code Playground

HTML

<div id="second-menu" class="collapse navbar-collapse menu_two">
	<ul class="nav navbar-nav inside-nav">
		<li class="sub_menu">
			<a href="#">Section 1</a>
			<ul class="sidenav_wrapper">
				<li class="sidenav_item sidenavlast">
					<a href="#">Section 2</a>
				</li>
			</ul>
		</li>
		<li class="active_sub_menu">
			<a href="#">Section 3</a>
			<ul class="sidenav_wrapper">
				<li class="sidenav_item">
					<a href="#">Section 4</a>
				</li>
				<li class="sidenav_item">
					<a href="#">Section 5</a>
				</li>
				<li class="sidenav_item">
					<a href="#">Section 6</a>
				</li>
				<li class="sidenav_item sidenavlast">
					<a href="#">Section 7</a>
				</li>
			</ul>
		</li>
		<li class="sub_menu">
			<a href="#">Section 8</a>
			<ul class="sidenav_wrapper">
				<li class="sidenav_item">
					<a href="#">Section 9</a>
				</li>
				<li class="sidenav_item">
					<a href="#">Section 10</a>
				</li>
				<li class="sidenav_item sidenavlast">
					<a href="#">Section 11</a>
				</li>
			</ul>
		</li>
	</ul>
</div>

CSS

.menu_two {
    border-left: 16px solid #dfdfdf;
    padding-left: 0;
}

.sidenav_wrapper {
	background: none repeat scroll 0 0 #e7ecf5;
	border-left: 6px solid #8fb8e6;
    display: none;
    padding: 0;
}

JavaScript

$('ul.navbar-nav li').hover(
		function () {
			$(this).find('.sidenav_wrapper:first').css('display','block');
		},
		function () {
			$(this).find('.sidenav_wrapper:first').css('display','none');  
		}
	);