JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<ul id="navigation">
	<li class="dropdown"><a href="#">Dropdown</a>
		<ul class="sub_navigation">
			<li><a href="#">Sub Navigation 1</a></li>
			<li><a href="#">Sub Navigation 2</a></li>
			<li><a href="#">Sub Navigation 3</a></li>
		</ul>
	</li>
	<li class="dropdown"><a href="#">Dropdown 2</a>
		<ul class="sub_navigation">
			<li><a href="#">Sub Navigation 1</a></li>
			<li><a href="#">Sub Navigation 2</a></li>
			<li><a href="#">Sub Navigation 3</a></li>
		</ul>
	</li>
</ul>

CSS

ul {
			margin:0;
			padding:0;
			list-style-type:none;
			min-width:200px;
		}
 
		ul#navigation {
			float:left;
		}
 
		ul#navigation li {
			float:left;
			border:1px black solid;
			min-width:200px;
		}
 
		ul.sub_navigation {
			position:absolute;
			display:none;
		}
 
		ul.sub_navigation li {
			clear:both;
		}
 
		a,
		a:active,
		a:visited {
			display:block;
			padding:10px;
		}

JavaScript

$('body').ready(function() {
 
	                // Add the 'hover' event listener to our drop down class
			$('.dropdown').hover(function() {
	                        // When the event is triggered, grab the current element 'this' and
	                        // find it's children '.sub_navigation' and display/hide them
				$(this).find('.sub_navigation').slideToggle(); 
			});
		});