JSFiddle - React, Tailwind, and code Playground

by Joseph Perez

HTML

<head>

	<style>

	body {
 		background-color: #f2e5bf;
 	}

	* {
		margin: 0;
		padding: 0;
 	}


	#primary_nav_wrap{
		float: right;
	}


#primary_nav_wrap{
	margin: 0 auto;	
}

#primary_nav_wrap ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap > ul > li > a {
	background-color: gray;
	padding:0 15px;
 	padding-right: 16px;
 	padding-left: 16px;
	line-height:32px;
}

#primary_nav_wrap ul a {
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height: 32px;
	font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

li li{
	margin:0;
	padding:0;
	background-color: white;
}

#primary_nav_wrap ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul li.top-level-menu-item
{
	background:#ddd
}

#primary_nav_wrap  ul li:hover
{
	background:#f6f6f6
}

#primary_nav_wrap  ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0
}

#primary_nav_wrap  ul ul li
{
	float:none;
	width:100%;
}



#primary_nav_wrap  ul ul ul
{
	top:0;
	left:100%
}

 #primary_nav_wrap ul li:hover > ul
{
	display:block
}


	li {
 		float: left;
		text-align: center;
 	}

	

	ul a {
 		display: block;
 		line-height: 80px;
 		text-decoration: none;
 		font-family: Georgia, "Times New Roman", Times, serif;
 		font-size: 21px;
 		color: #371C1C;
 	}	

	ul a:hover {
		color: #FFF;
 	}

	
	ul ul{
		display: none;
	}


	ul:hover ul{
		display: block;
	}

ul ul li
{
	float:none;
}




	</style>

</head>


<body>
<nav id="primary_nav_wrap">
<ul>
 <li> <a class="top-level-menu-item" href="#">Consumer Health Protection</a>
	<ul>
		<a href="#"><li>Home</li></a>
		<a href="#"><li>Applications, Forms, Permits</li></a>
		<a href="#"><li>Consumer Health Protection</li></a>
		<a href="#"><li>F.A.Q.</li></a>
		<a href="#"><li>Food Recall Webinar and Tool Kit</li></a>
		<a href="#"><li>Food Application</li></a>
		<a href="#"><li>Food...

JavaScript

/*Created sometime between the time of 7/21/2016 8:00 AM and 9:41 AM*/