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"><button>&nbsp;2 &#187; </button>
			<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"><button>&nbsp;3 &#187; </button>
			<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;
    color: #0000F0;
}

/*CSS style to match link style*/
#menu ul li button{
    border: 1px solid grey;
    background: white;
    margin: none;
    font-size: inherit;
    width: 150px;
    line-height: 200%;
    text-align:center;
    float:left;
    text-decoration: none;
    display:block;
    color: #0000F0;
    box-sizing: padding-box;
}
		 
#menu ul ul li {margin:0;}

#menu ul ul li a,
#menu ul ul li button{
    text-align:center; width:144px;
}

#menu ul li a:active + ul.dropdown,
#menu ul li button:active + ul.dropdown{
    left:130px;
}

#menu ul li a:focus + ul.d1,
#menu ul li a:focus + ul.d2,
#menu ul li button:focus + ul.d1,
#menu ul li button: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,
#menu ul li button:hover{
    color: #FFF; background: #333;
}

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