JSFiddle - React, Tailwind, and code Playground

by refhat

HTML

<div class="container">
		<div class="floating-nav">
			<div class="nav">
				<ul>
					<li class="parent-li"><a href="javascript:void(0)">Home</a>
						<div class="ddiv">
						<ul>
							<li class="child-li"><a href="javascript:void(0)">Sub Home 1</a></li>
							<li class="child-li"><a href="javascript:void(0)">Sub Home 2</a></li>
							<li class="child-li"><a href="javascript:void(0)">Sub Home 3</a></li>
						</ul>
					</div>
					</li>
					<li class="parent-li"><a href="javascript:void(0)">About</a>
						<div class="ddiv">
						<ul>
							<li class="child-li"><a href="javascript:void(0)">Sub About 1</a></li>
							<li class="child-li"><a href="javascript:void(0)">Sub About 2</a></li>
							<li class="child-li"><a href="javascript:void(0)">Sub About 3</a></li>
						</ul>
					</div>
					</li>
					<li class="parent-li"><a href="javascript:void(0)">Services</a>
						<div class="ddiv">
						<ul>
							<li class="child-li"><a href="javascript:void(0)">Sub Services 1</a></li>
							<li class="child-li"><a href="javascript:void(0)">Sub Services 2</a></li>
							<li class="child-li"><a href="javascript:void(0)">Sub Services 3</a></li>
						</ul>
					</div>
					</li>
					<li class="parent-li"><a href="javascript:void(0)">Contact</a>
						<div class="ddiv">
						<ul>
							<li class="child-li"><a href="javascript:void(0)">Sub Contact 1</a></li>
							<li class="child-li"><a href="javascript:void(0)">Sub Contact 2</a></li>
							<li class="child-li"><a href="javascript:void(0)">Sub Contact 3</a></li>
						</ul>
					</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="scrolling-content">
		</div>
	</div>

CSS

.container{margin:0 auto;width:964px;height:1000px;border:1px solid red;}
.floating-nav{margin:10px;}
.floating-nav .nav{}
.floating-nav .nav ul{list-style: none;overflow: hidden;padding:0px;}
li.parent-li{float:left;width:230px;text-align: center;}
li.child-li{}
.parent-li ul{}
.ddiv{display: none;}
.floating-nav .nav ul li{background: #990000;}
.floating-nav .nav ul li a{color:#fff;width:230px;display: block;padding: 5px;text-decoration: none;} 
.container .scrolling-content{border:1px solid #000;margin:10px;height: 900px;}
.child-li a:hover{background: #000;}

JavaScript

$(function() {
			$(".parent-li").live('hover', function() {
			 $(this).find(".ddiv").slideToggle();
			});
		});