JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menus">
		<li>
			<a href="#">Main Menu</a>						
			<ul class="main-subs">
				<li><a href="#">Sub Menu 1</a></li>							
				<li><a href="#">Sub Menu 1</a></li>
			</ul>						
		</li>
		<li>
			<a href="#">Main Menu2</a>
			<ul class="main-subs">
				<li class="withsub"><a href="#">Sub Menu 2</a>
				</li>							
				<li class="withsub"><a href="#">Sub Menu 2</a>
				</li>
				<li><a href="#">Sub Menu 2</a></li>
			</ul>						
		</li>
		<li>
			<a href="#">Main Menu3</a>						
			<ul class="main-subs">
				<li><a href="#">Main Menu3</a></li>							
				<li><a href="#">Main Menu3</a></li>
				<li><a href="#">Main Menu3</a></li>
			</ul>						
		</li>
		
	</ul>

CSS

.menus { display: table; width: 70%; height: 76px; }
.menus li { position: relative; display: table-cell; height: 48px; padding: 0; text-transform: uppercase; font-size: 17px; font-family: 'Myriad Pro'; text-align: center; }
.menus li:hover {background:green;}
.menus li.order a { color: #ffffff; }
.menus li.order .main-subs { display: none; }
.menus li a { width: 100%; height: 48px; padding-top: 28px; display: block; color: #b1bbbe; }
.menus li a:hover { color: #fff; }
.menus li:hover { background: green; }
.menus li.current { background: #0383E7; }
.menus li.current a { color: #fff; }
.menus .main-subs { display: none; position: absolute; width: 100%; left: -40px; top: 76px; z-index: 999; }
.menus .main-subs li { display: block; height: 51px; padding: 0; border-bottom: 1px solid #0383e7; text-align: left; text-transform: uppercase; background: #0870d3; font: normal 12px 'Malgun Gothic'; }
.menus .main-subs li a { display: block; height: 31px; padding-left: 12px; padding-top: 20px; color: #fff; }
.menus .main-subs li:hover { background: #0866c5; }
.menus .main-subs li:last-child { border-bottom: 0; }

JavaScript

$('.menus >li').on('click', '> a' ,function() {
		$(this).siblings('.main-subs').show();	
	}).on('click', function(){	
		$(this).siblings('.main-subs').hide();		
	});