JSFiddle - React, Tailwind, and code Playground

by ptubig

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/3.17.2/build/cssreset/cssreset-min.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
		<div id="content">
			<button class="main-menu-trigger">Hover over me</button>
			<div id="main-menu">
				<ul class="menu">
					<li id="menu-item1" class="menu-item">
						<a class="label sub-menu-trigger">Menu Item 1</a>
						<ul class="sub-menu" data-parent="menu-item1">
							<li class="sub-menu-item"><a class="label">Menu Item 1 - Sub Menu Item 1</a></li>
							<li class="sub-menu-item"><a class="label">Menu Item 1 - Sub Menu Item 2</a></li>
							<li class="sub-menu-item"><a class="label">Menu Item 1 - Sub Menu Item 3</a></li>
							<li class="sub-menu-item"><a class="label">Menu Item 1 - Sub Menu Item 4</a></li>
							<li class="sub-menu-item"><a class="label">Menu Item 1 - Sub Menu Item 5</a></li>
						</ul>
					</li>
					<li id="menu-item2" class="menu-item">
						<a class="label sub-menu-trigger">Menu Item 2</a>
						<ul class="sub-menu" data-parent="menu-item2">
							<li class="sub-menu-item"><a class="label">Menu Item 2 - Sub Menu Item 1</a></li>
							<li class="sub-menu-item"><a class="label">Menu Item 2 - Sub Menu Item 2</a></li>
							<li class="sub-menu-item"><a class="label">Menu Item 2 - Sub Menu Item 3</a></li>
							<li class="sub-menu-item"><a class="label">Menu Item 2 - Sub Menu Item 4</a></li>
							<li class="sub-menu-item"><a class="label">Menu Item 2 - Sub Menu Item 5</a></li>
						</ul>
					</li>
					<li id="menu-item3" class="menu-item">
						<a class="label sub-menu-trigger">Menu Item 3</a>
						<ul class="sub-menu" data-parent="menu-item3">
							<li class="sub-menu-item"><a class="label">Menu Item 3 - Sub Menu Item 1</a></li>
							<li class="sub-menu-item"><a class="label">Menu Item 3 - Sub Menu Item 2</a></li>
							<li class="sub-menu-item"><a class="label">Menu Item 3 - Sub Menu Item 3</a></li>
							<li class="sub-menu-item"><a...

CSS

.menu-item {
				display: block;
			}


			.label {
				display: block;
				width: 100px;
				border: 1px solid black;
				cursor: pointer;
			}

			.label:hover {
				background: yellow;
			}

			.active {
				background: yellow;
			}

			.menu-item > .label {
				height: 25px;
			}

			.sub-menu {
				display: none;
				position: absolute;
			}

JavaScript

$(function() {

				// Keep a reference to the current sub menu that is open. This helps to
				// keep state of submenus. We only have one submenu showing at a time.
				var currentSubMenu = null;

				// Timeout object to handle the transitions of hiding the submenu.
				var currentSubMenuTimeout = null;

				/**
				 * Show the sub menu
				 * @param target Target element of a specific trigger.
				 */
				function showSubMenu(target) {

					// If a current menu has a timeout triggered, then just cancel the
					// timeout and execute the hide of the previous submenu.
					if (currentSubMenuTimeout) {
						clearTimeout(currentSubMenuTimeout);
						currentTimeout = null;
						hideCurrentSubMenu();
					}

					// Find the new submenu based on the active trigger.
					var $parent = $(target).parent();
					var $submenu = $parent.find('.sub-menu');

					// Position submenu to the trigger.
					$submenu.css('top', $parent.offset().top);
					$submenu.css('left', $parent.offset().left + 100);

					// Append the submenu to the body and show. This will allow the
					// submenu to overlay.
					$('body').append($submenu);
					$submenu.show();

					// Update the currentSubMenu reference with the new submenu.
					currentSubMenu = $submenu;

					$(target).addClass('active');
				}

				/**
				 * Hide the current submenu
				 */
				function hideCurrentSubMenu() {
					if (currentSubMenu) {

						// Find which parent the current submenu belongs to so we can
						// reattach it back and hide it.
						var $parent = $('#' + currentSubMenu.data('parent'));
						$parent.append(currentSubMenu);
						currentSubMenu.hide();
					}

					$('.menu-item .sub-menu-trigger').removeClass('active');

					// Set it to null because we don't have a current submenu anymore.
					currentSubMenu = null;
				}

				/***  Submenu triggers event handlers. ***/
				$('.menu-item a.sub-menu-trigger').on('mouseover', function(event)...