JSFiddle - React, Tailwind, and code Playground

by Uttam Kumar Roy

HTML

<nav>
<ul class="main_nav">
    <li>
        <a href="home.html">Home</a>
    </li>
    <li>
        <a href="bio.html">Bio</a>
    </li>
    <li> 
        <a>Listen</a>
        <ul class="sub-menu">
            <li><a href="musicOriginal.html">Originals</a></li>
            <li><a href="musicTvfilm.html">TV/Film</a></li>
        </ul>
    </li>   
    <li><a href="credits.html">Credits</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>
</nav>

CSS

nav
{
	margin-top:15px
}

nav ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0
}

nav ul a
{
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height:32px;
	padding:0 15px;
	font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

nav ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0
}

nav ul li:hover
{
	background:#f6f6f6
}

nav ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0
}

nav ul ul li
{
	float:none;
	width:200px
}

nav ul ul a
{
	line-height:120%;
	padding:10px 15px
}

nav ul ul ul
{
	top:0;
	left:100%
}

nav ul li:hover > ul
{
	display:block
}