JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

HTML

<div id="a">
            		<div id="nav">
                    	<ul>
                        	<li><a href="#">home</a></li>
                            <li><a href="#">mobile view</a></li>
                            <li><a href="#">categories</a>
                            	<ul>
                                	<li><a href="">Cat 1</a></li>
                                    <li><a href="">Cat 2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">contact me</a></li>
                        </ul>
                    </div>
            </div>

CSS

#a{
	width:96%;
	height:600px;
	position:relative;
	background-color:#0F0;
	opacity:0.8;
	font-family:tahoma;
	font-size:12px;
	padding:2%;
	
}
#nav ul{
	position:relative;
	height:30px;
	list-style:none;
	background:#000;
	padding:0px;
}
#nav ul li{
	display:inline-block;
	width:100px;
	height:30px;
	text-align:center;
}
#nav li{
	background:#000;
}
#nav li:hover{
	background:#999;
}

#nav ul li ul{
	display:none;
	position:absolute;
	top:30px;
}
#nav ul li ul li{
	display:block;
}
#nav ul li:hover ul{
	display:block;
}
#nav a{
	line-height:25px;
	text-decoration:none;
	width:100px;
	color:#fff;
}