JSFiddle - React, Tailwind, and code Playground

by psics

HTML

<body>
	<div class="container">
		<nav>
			<ul id="droping-menu">
				<li>Menu 1
					<ul class="submenu">
						<li>Submenu 1</li>
						<li>Submenu 2</li>
						<li>Submenu 3</li>
					</ul>
				</li>
				<li>Menu 2</li>
				<li>Menu 3</li>
				<li>Menu 4
					<ul class="submenu">
						<li>Submenu 1</li>
						<li>Submenu 2</li>
						<li>Submenu 3</li>
					</ul>
				</li>
				<li>Menu 5
					<ul class="submenu">
						<li>Submenu 1</li>
						<li>Submenu 2</li>
						<li>Submenu 3</li>
					</ul>
				</li>
			</ul>
		</nav>
	</div>
</body>

CSS

/* Yahoo! CSS Reset */
body, div, dl, dt, dd, ul, ol, li,  pre, form, fieldset, input, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
fieldset, img {
	border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
caption, th {
	text-align: left;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
q:before, q:after {
	content: '';
}
abbr, acronym {
	border: 0;
}
/* End of Yahoo! CSS Reset */
.container {
	background: #f1f1f1;
	left: 50%;
	margin: 0 0 0 -475px;
	position: relative;
	width: 950px;
}
#droping-menu{
	background: #b8e1fc; /* Old browsers */
	background: -moz-linear-gradient(top,  #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */

}

#droping-menu li {
	display: inline-block;
	height:...