JSFiddle - React, Tailwind, and code Playground

by BlogPedas

HTML

<nav>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Tutorials</a>
			<ul>
				<li><a href="#">Photoshop</a></li>
				<li><a href="#">Illustrator</a></li>
				<li><a href="#">Web Design</a>
					<ul>
						<li><a href="#">HTML</a></li>
						<li><a href="#">CSS</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Articles</a>
			<ul>
				<li><a href="#">Web Design</a></li>
				<li><a href="#">User Experience</a></li>
			</ul>
		</li>
		<li><a href="#">Inspiration</a></li>
	</ul>
</nav>

CSS

nav ul ul {display: none;}
nav ul li:hover > ul {display: block;}
nav ul {
	background: #D8D8D8; 
	padding: 0px;
	border-radius: 10px;  
	list-style: none;
	position: relative;
    font: 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
    display: inline-table;
}
	nav ul:after {content: ""; clear: both; display: block;}
nav ul li {	float: left;}
	nav ul li:hover {background: #4b545f;}
		nav ul li:hover a {color: #fff;}
	
	nav ul li a {display: block; padding: 15px 30px;color: #757575; text-decoration: none;}
nav ul ul {background: #5f6975; border-radius: 0px; padding: 0;position: absolute; top: auto;}
	nav ul ul li {float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative;}
		nav ul ul li a {padding: 15px 30px; color: #fff;}	
			nav ul ul li a:hover {background: #4b545f;}
nav ul ul ul {position: absolute; left: 100%; top:0;}

@media screen and (max-width:768px){
    
}