JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
	<ul class="levelone" >
        <li class="active"><a href="#">&nbsp;Home</a></li>
		<li class="fly"><a href="#">&nbsp;1</a></li>
		<li class="fly"><a href="#">&nbsp;2 &#187; </a>
			<ul class="dropdown d1">
				<li class="fly"><a href="#">2a</a></li>				 
				<li class="fly"><a href="#">2b</a></li>
				<li class="fly"><a href="#">2c</a></li>
			</ul>
	    </li>
		<li class="fly"><a href="#">&nbsp;3 &#187; </a>
			<ul class="dropdown d1">
				<li><a href="#">3a</a></li>
				<li><a href="#">3b</a></li>
			</ul>
        </li>
		<li class="fly"><a href="#">&nbsp;4</a></li>
    </ul>
</div>

<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>
<p>Test
</p>

CSS

#menu {display:initial; position:fixed; z-index:500; width: 150px;vertical-align: top;line-height: 200%;}
#menu ul {padding:0; margin:0; list-style:none; padding: 0;list-style: none;margin: 0px;}
#menu ul ul {z-index:501; position:absolute; left:-9999px; width:150px;}
		 
#menu ul li {margin-right:5px; float:left;position:relative;line-height: 200%;position: relative;}
#menu ul li a {display:block; float:left;  text-decoration:none;width: 150px;;display: block;line-height: 200%; text-align:center; border: 1px solid grey;background: white; }
		 
		#menu ul ul li {margin:0;}
		#menu ul ul li a {text-align:center; width:144px;}
		#menu ul li a:active + ul.dropdown {left:130px; }
		#menu ul li a:focus + ul.d1,
		#menu ul li a:focus + ul.d2 {left:130px}
		#menu ul li ul.dropdown:hover {left:130px}
		#menu ul li ul li{background: #999999}
		#menu ul li a:hover{ color: #FFF; background: #333;}

        #menu li.active > a,
		#menu li.active > a:hover,
		#menu li.active > a:focus { color: #fff; background-color: #337ab7;}