JSFiddle - React, Tailwind, and code Playground

HTML

<h1>navigation menu</h1>

<ul id="navmenu">
	<li><a href="#">hyperlink1</a></li>
	<li><a href="#">hyperlink2</a>
		<ul class="sub1">
			<li><a href="#">hyperlink2.1</a></li>
			<li><a href="#">hyperlink2.2</a></li>
			<li><a href="#">hyperlink2.3</a></li>
		</ul>
	</li>
	<li><a href="#">hyperlink3</a></li>
	<li><a href="#">hyperlink4</a>
		<ul class="sub1">
			<li><a href="#">hyperlink4.1</a></li>
			<li><a href="#">hyperlink4.2</a></li>
			<li><a href="#">hyperlink4.3</a>
				<ul class="sub2">
					<li><a href="#">hyperlink4.3.1</a></li>
					<li><a href="#">hyperlink4.3.2</a></li>
					<li><a href="#">hyperlink4.3.3</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#">hyperlink5</a></li>


</ul>

CSS

* {margin:0px; padding:0px;}
body {font-family:verdana;background-color:#ABC;}
h1{text-align:center;border-bottom:2px solid #009;margin-bottom:50px;}
ul#navmenu, ul.sub1, ul.sub2{list-style:none;font-size:9pt;}
ul#navmenu li{width:125px;text-align:center;position:relative;float:left;margin-right:4px;}
ul#navmenu a{text-decoration:none;display:block;width:125px;height:25px;line-height:25px;background-color:#fff;border:1px solid #ccc;border-radius:5px;}
ul#navmenu .sub1 li{}
ul#navmenu .sub1 a{margin-top:5px;}
ul#navmenu .sub2 a{margin-left:10px;}
ul#navmenu li:hover > a{background-color:#cfc;}
ul#navmenu li:hover a:hover{background-color:#ff0;}
ul#navmenu ul.sub1{display:none;position:absolute;top:26px;left:0px;}
ul#navmenu ul.sub2{display:none;position:absolute;top:0px;left:126px;}
ul#navmenu li:hover .sub1{display:block;}
ul#navmenu .sub1 li:hover .sub2{display:block;}
display{display:block !important}

JavaScript

$("ul#navmenu li").click(function(){
    $('.sub1').removeClass('display');
    $(this).find('.sub1').addClass('display');
})