JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
	<li><a href="#">Home</a>
		<ul>
			<li>
				<ul>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
				</ul>
				<ul>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
				</ul>
				<ul>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
				</ul>
				<ul>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
					<li><a href="#">Testing</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#">About</a>
		<ul>
			<li>
				<ul>
					<li><a href="#">Testing 2</a></li>
					<li><a href="#">Testing 2</a></li>
					<li><a href="#">Testing 2</a></li>
					<li><a href="#">Testing 2</a></li>
					<li><a href="#">Testing 2</a></li>
					<li><a href="#">Testing 2</a></li>
					<li><a href="#">Testing...

CSS

body {
	font: x-small Verdana, Arial, Helvetica, sans-serif;
}
* html body{
	font-size:xx-small;
 f\ont-size:x-small;
}
ul#nav{
float:left;
}
ul#nav, ul#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}
ul#nav  li {
	float: left;
	width:149px;
}
#nav li ul {
	position: absolute;
	margin-left: -999em; /* hide menu from view */
	top: 2.3em;
	left:0;
	width:596px;
	border-top:1px solid red;
}
#nav li ul li{
	width:100%;
	border:1px solid red;
	border-top:none;
	background:#06c;
	float:left;
	padding:2px;
}
#nav li ul ul{
	position:relative;
	float:left;
	width:140px;
	margin:0 5px 0 0;
	display:inline;
	top:0;
	border:none;
}
#nav li ul li li{
	border:none;
	width:140px;
	padding:0;
	margin:2px 0;
	background:#06c;
}
ul#nav li a {
	display: block;
	text-decoration: none;
	color: #777;
	background:#fee; /* IE6 Bug */
	padding: 5px;
	border-right: 1px solid #fff;
	min-height:0;
}
#nav li li a { 
	padding: 2px 5px; 
	color:#fff;
	background:#06c;
	border:none;
}
ul#nav li.over a,ul#nav li:hover a{
	border:1px solid red;
	border-bottom:none;
	top:1px;
	position:relative;
	z-index:99;
	padding:5px 5px 5px; 
}
ul#nav li.over li a,ul#nav li:hover li a{top:0;border:none}
/* commented backslash mac hiding hack \*/ 
* html ul#nav  li a {height:1%;	position:relative;}
/* end hack */ 
#nav li:hover ul,#nav li.over ul {margin-left:0; } /* show menu*/

#nav li:hover a,#nav  li.over a { background-color:#06c;border-bottom:1px solid #06c;color:#fff;}
#nav li:hover li a:hover,#nav li.over li a:hover{background:#fffccc;color:red}
#nav li:hover li a,#nav li.over li a {
   color: #fff;
   background-color: #06c;
}