JSFiddle - React, Tailwind, and code Playground

by Anurag Arora

HTML

<div id="nav">
<ul>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3<span class="right-arrow">&#9658;</span></a>
		<ul>
			<li><a href="#">3.1</a></li>
			<li><a href="#">3.2</a></li>
			<li><a href="#">3.3<span class="right-arrow">&#9658;</span></a>
				<ul>
					<li><a href="#">3.3.1</a></li>
					<li><a href="#">3.3.2</a></li>
				    <li><a href="#">3.3.3</a></li>
					<li><a href="#">3.3.4</a></li>
				</ul></li>
			<li><a href="#">3.4<span class="right-arrow">&#9658;</span></a>
				<ul>
					<li><a href="#">3.4.1</a></li>
					<li><a href="#">3.4.2</a></li>
				</ul></li>
			<li><a href="#">3.5<span class="right-arrow">&#9658;</span></a>
				<ul>
					<li><a href="#">3.5.1</a></li>
					<li><a href="#">3.5.2</a></li>
				</ul></li>
			<li><a href="#">3.6</a></li>
		</ul>
	</li>
	</ul>

CSS

.clearboth {
    margin: 0;
    padding: 0;
    clear: both;
}
 
#nav {
    font-family: verdana;
    font-weight: bold;
    font-size: 9pt;
}
 
#nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
 
#nav a:link,
#nav a:visited {
    color: #ffffff;
    text-decoration: none;
}
 
#nav a {
    display: block;
    padding: 6px 8px;
}
 
#nav li {
	background-color: #000000;
	margin-top: 1px;
	position: relative;
	width: 125px;
	border-radius: 15px;
}

#nav li li{
    width: 160px;
    margin-top: 1px;
}

#nav li:hover {
	background-color: #555555;
}
#nav li li:hover {
	background-color: #757575;
}	

 
#nav ul ul  {
    position: absolute;
    left: 100%;
	top: -2px;
    border: solid 1px transparent;
	visibility: hidden;
}
 
#nav ul ul ul{
    position: absolute;
    left: 100%;
	top: -2px;
    border: solid 1px transparent;
}  

#nav li:hover > ul {
	visibility: visible;
}
 
.right-arrow {
    float: right;
}