JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
			<ul class="flash">
				<li class="has-sub">
					<a href="#">Forum</a>
					<ul class="sub-menu sub-1">
						<li><a href="#">Sub Link 01</a></li>
						<li class="has-sub">
							<a href="#">Sub Link 02</a>
								<ul class="sub-menu sub-2">
									<li><a href="#">Link 02-1</a></li>
									<li class="has-sub">
										<a href="#">Sub Link 03</a>
                                <ul class="sub-menu sub-3">
                                    <li><a href="#">Link 02-21</a></li>
                                    <li><a href="#">Link 02-22</a></li>
                                    <li><a href="#">Link 02-23</a></li>
                                    <li><a href="#">Link 02-24</a></li>
                                </ul>
									</li>
								</ul>
						</li>
						<li><a href="#">Link 03</a></li>
						<li><a href="#">Link 04</a></li>
					</ul>
				</li>
			</ul>
		</div>

CSS

* {
	padding: 0;
	margin: 0;
}

}
 ul.flash {
 	background-color: #eb4549;
 	position: relative;
 }

 ul.flash li {
 	float: left;
 	position: relative;
 	list-style: none;
 	background-color: #eb4549;
 }
 .wrap {
 	width: 960px;
 	margin: 60px;
 }
 ul.flash li a {
 	
 	overflow: hidden;
 	padding: 20px 24px;
 	color: #fff;
 	display: block;
 	text-decoration: none;
 }

 ul.flash li a:hover {
 	background-color: #abc145;
 }

 ul.sub-menu {
	position: absolute;
	display: none;
 }

 ul.sub-menu li {
 	background-color: #333;
 	width: 175px;
 }

 li:hover > .sub-menu {
 	display: block; 
 }
 .flash .sub-menu .sub-menu {
 	left: 175px;
 	top: 0px;
 }

JavaScript

alert($('ul.sub-1').outerHeight());
alert($('ul.sub-2').outerHeight());