JSFiddle - React, Tailwind, and code Playground

by Mostafa Zeinivand

HTML

<ul>
<li><a href="">ITEM1</a>
	<ul>
    	<li><a href="">item1</a></li>
        <li><a href="">item2</a></li>
    </ul>
</li>
<li><a href="#">ITEM2</a></li>
<li><a href="#">ITEM3</a></li>
<li><a href="#">ITEM4</a></li>
</ul>

CSS

ul{
	list-style-type:none;
	margin:0;
	padding:0;
}
li{
	float:left;
}
a{
	display:block;
	width:120px;
	background-color:#98BF21;
	text-align:center;
	padding:5PX;
	text-decoration:none;
	color:#FFF;
}
a:hover{
	background-color:#7a991a;
}
li ul{
	display:none;
}
ul li:hover ul{
    position:absolute;
    display:block;
}
ul li ul li{
    display:block;
    background:red;
    float:none;
}