JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="navbar navbar-custom" role="navigation">
		<ul>
			<li class="li">
			<a href="#" class="navbar-menu">Products</a>
				<ul class="dropdown">
					<li class="dropdown-1"><a href="zoo.html">Zoo</a></li>
    				<li class="dropdown-1"><a href="lake.html">At the Lake</a></li>
   					<li class="dropdown-1"><a href="sunset.html">Sunset</a></li>
				</ul>
			</li>
			
			<li class="li">
			<a href="#" class="navbar-menu2">References</a>
			</li>
			
			<li class="li">
			<a href="#" class="navbar-menu2">References</a>
			</li>
			
			<li class="li">
			<a href="#" class="navbar-menu2">Om ...</name></a>
			</li>
		</ul>
	</nav>

CSS

.navbar-custom {
	background-image: url('http://s16.postimg.org/9op9gk2xd/navbar_custom.png');
	height: 61px;
	width: 530px;
	border-radius: 7px;
	margin-left: auto;
    margin-right: auto;
	float: center;
	padding-left: 200px;
}
.left-nav-space {
	height: 70px;
	width: 200px;	
}
.navbar-menu {
	height: 59px;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: 700;
	font-size: 12px;
	position: relative;
	display:inline-block;
	color: #FFF;
	padding-top: 20px;
	list-style: none;
	padding-bottom: 23px;
	text-align: center;	
	text-decoration: none !important;
}
.navbar-menu:hover {
	background-image: url('http://s17.postimg.org/l5l1az6rf/navbar_menu_hover.png');
	height: 59px;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: 700;
	font-size: 12px;
	position: relative;
	display:inline-block;
	color: #FFF;
	padding-top: 20px;
	list-style: none;
	padding-bottom: 23px;
	text-align: center;	
	text-decoration: none !important;
	border-bottom: 2px solid orange;
}
.navbar-menu2 {
	height: 59px;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: 700;
	font-size: 12px;
	position: relative;
	display:inline-block;
	color: #FFF;
	padding-top: 20px;
	list-style: none;
	margin-left: -4px;
	padding-bottom: 23px;
	text-align: center;	
	text-decoration: none !important;
}
.navbar-menu2:hover {
	background-image: url('http://s17.postimg.org/l5l1az6rf/navbar_menu_hover.png');
	height: 59px;
	padding-left: 10px;
	padding-right: 10px;
	font-weight: 700;
	font-size: 12px;
	position: relative;
	display:inline-block;
	color: #FFF;
	padding-top: 20px;
	list-style: none;
	margin-left: -4px;
	padding-bottom: 23px;
	text-align: center;	
	text-decoration: none !important;
	border-bottom: 2px solid orange;
}
.ul {
	list-style:none;
}
.li {
	display:inline-block;
	list-style:none;

}
.dropdown {
	position:absolute; 
	top:62px; 
	left:0; 
	visibility:hidden;
	background-color: red;
}
.li:hover ul {
	visibility:visible;
}
.dropdown-1 {
	float:none; 
	width:150px;...