JSFiddle - React, Tailwind, and code Playground

by lokdmt

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<nav class="top-menu">
  <ul class="top-menu__list">
    <li class="top-menu__item top-menu__item_active"><a href="#" class="top-menu__link">About</a>
    </li>
    <li class="top-menu__item top-menu__item_has-child"><a href="javascript:undefined" class="top-menu__link">API + Tools</a>
      <ul class="top-menu__submenu">
        <li class="top-menu__submenu-item"><a href="#" class="top-menu__submenu-link">API</a>
        </li>
        <li class="top-menu__submenu-item top-menu__submenu-item_active"><a href="#" class="top-menu__submenu-link">Lens Extension</a>
        </li>
        <li class="top-menu__submenu-item"><a href="#" class="top-menu__submenu-link">Shifty Button</a>
        </li>
        <li class="top-menu__submenu-item"><a href="#" class="top-menu__submenu-link">Skeleton</a>
        </li>
        <li class="top-menu__submenu-item"><a href="#" class="top-menu__submenu-link">ShapeShift for Mobile</a>
        </li>
        <li class="top-menu__submenu-item"><a href="#" class="top-menu__submenu-link">Recommended BTC Miner Fee</a>
        </li>
      </ul>
    </li>
    <li class="top-menu__item top-menu__item_has-child"><a href="javascript:undefined" class="top-menu__link">Resources</a>
      <ul class="top-menu__submenu">
        <li class="top-menu__submenu-item"><a href="#" class="top-menu__submenu-link">Company Information</a>
        </li>
        <li class="top-menu__submenu-item top-menu__submenu-item_active"><a href="#" class="top-menu__submenu-link">For Business</a>
        </li>
        <li class="top-menu__submenu-item"><a href="#" class="top-menu__submenu-link">Affiliates</a>
        </li>
        <li class="top-menu__submenu-item"><a href="#" class="top-menu__submenu-link">Press</a>
        </li>
        <li class="top-menu__submenu-item"><a href="#" class="top-menu__submenu-link">Testimonials</a>
        </li>
        <li...

SCSS

body {
  background-color: #213955;
  text-align: center;
}

.top-menu {
	z-index: 10;
	display: inline-block;
  text-align: left;
  
  &__list {
		margin: 0;
		padding: 0;
		&:after {
			content: '';
			display: table;
			clear: both;
		}
	}
  
  &__link, &__submenu-link {
		text-decoration: none;
	}
  
  &__item {
		float: left;
		position: relative;
		margin-right: 30px;
		padding-bottom: 15px;
		&_active, &:hover {
			.top-menu__link {
				color: #6397d1;
			}
		}
		&_has-child {
			.top-menu__link {
				padding-right: 15px;
				&:before {
					content: '';
					position: absolute;
					top: 10px;
					right: 0;
					border-top: 4px dashed;
					border-right: 4px solid transparent;
					border-left: 4px solid transparent;
				}
			}
		}
		&_open {
			.top-menu__link {
				color: #6397d1;
				&:before {
					transform: rotate(180deg);
				}
			}
		}
	}
  
  &__link {
		display: inline-block;
		padding: 0;
		font-size: 18px;
		line-height: 22px;
		color: #fff;
	}
  
  &__submenu {
		display: none;
		background: #fff;
		border: 1px solid rgba(0,0,0,.15);
		border-radius: 4px;
		box-shadow: 0 6px 12px rgba(0,0,0,.175);
		padding: 5px 0;
		position: absolute;
		left: 0;
		top: 100%;
		z-index: 10;
		min-width: 160px;
		width: auto;
		.top-menu__submenu {
			position: absolute;
			left: 100%;
			top: 0;
			transition: .4s linear;
		}
	}
  
  &__submenu-item {
		position: relative;
		&_active, &:hover {
			.top-menu__submenu-link {
				color: #6397d1;
			}
		}
	}
  
  &__submenu-link{
		color: #333;
		display: block;
		padding: 5px 20px;
		font-size: 18px;
		line-height: 21px;
		white-space: nowrap;
	}

}

JavaScript

$(function() {

	$('.top-menu__item_has-child .top-menu__link').click(function(event) {
		var parent = $(this).parents('li');
		parent.toggleClass('top-menu__item_open');
		parent.find('ul').slideToggle();
		return false;
	});

	$(document).click(function (e){
		var container = $('.top-menu__submenu');
		if (!container.is(e.target)) {
			container.slideUp();
			$('.top-menu__item').removeClass('top-menu__item_open');
		}
	});

});