JSFiddle - React, Tailwind, and code Playground

by Fredy Sudhir

HTML

<ul id="nav2" class="sf-menu">
<li class='current_page_item'><a href='index.php'>HOME</a></li>
	<li><a href='?content=matkul'>SUB MENU 1</a>
		<ul>
			<li><a href='?content=matkul&id=1'>Menu 1</a></li>
			<li><a href='?content=matkul&id=2'>Menu 2</a></li>
			<li><a href='?content=matkul&id=3'>Menu 3</a></li>
			<li><a href='?content=matkul&id=4'>Menu 4</a></li>
			<li><a href='?content=matkul&id=5'>Menu 5</a></li>
		</ul>
	</li>
	<li><a href='?logout'>LOGOUT</a></li></ul>

CSS

/* NAVIGATION ------------------------------------------------------------*/
body {
    background-color:#000;
}
#nav-holder{
	width: 700px;
	position: absolute;
	top:68px;
	right: 10px;
	font-size: 20px;
}

#nav2{
	display: block;
	float: right;
	font-family:"bebas Neue";
}

#nav2 li{
	display: block;
	float: left;
	padding-left: 20px;
}

#nav2 > ul li:first-child{
	padding-left: 0px;
}

#nav2 li a{
	color: #f0efeb;
	text-decoration: none;
	padding-bottom: 5px;
}

#nav2>li>a:hover,
#nav2>li.current_page_item>a{
	color: #d24c0a;
	background: url(../img/sprites.png) no-repeat center -51px;
}		

/* sub nav */
#nav2 li ul{
	padding:0px;
	background: #1b1b1b;
	display:none;
}
#nav2 li:hover ul{
	display: block;
    position:absolute;
	padding:3px;
	background: #1b1b1b;
	z-index:2000;
	margin: 5px 0px 0px 0px;
	color: #fff;
	border-bottom: 1px solid #939392;
	color: #d24c0a;
}

#nav li ul li{
	padding: 0px;
	margin: 0px;
	border-bottom: 1px solid #939392;
}

#nav2 li ul li:last-child{
	border-bottom: none;
}

#nav2 li ul li{
	padding: 5px;
	margin: 0px;
	font-size: 18px;
	color: #939392;
    float:none;
}

/* text nya */
#nav2 li ul li:hover{ 
	background: #4e4e50;
	background-size:contain;
}

#nav2 li ul li:hover a{ color: #fff; }