JSFiddle - React, Tailwind, and code Playground

by Mostafa Zeinivand

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

body{
	direction:rtl;
	text-align:right;
	background:url(img/molecules.jpg);
}
#a{
	height:200px;
	position:relative;
	background-color:#0F0;
	opacity:0.8;
	font-family:tahoma;
	font-size:12px;
	padding:10px;
	
}
#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;
}