<nav class="navbar">
	<ul class="nav">
		<li>
			Home
			<ul class="dropdown">
				<li>Menu 1</li>
				<li>Menu 2</li>
				<li>Menu 3</li>
				<li>Menu 4</li>
				<li>Menu 5</li>
				<li>Menu 6</li>
			</ul>
		</li>
		<li>
			About
			<ul class="dropdown">
				<li>Menu 1</li>
				<li>Menu 2</li>
				<li>Menu 3</li>
				<li>Menu 4</li>
				<li>Menu 5</li>
				<li>Menu 6</li>
				<li>Menu 7</li>
				<li>Menu 8</li>
				<li>Menu 9</li>
			</ul>			
		</li>
		<li>
			Pricing
			<ul class="dropdown">
				<li>Menu 1</li>
				<li>Menu 2</li>
				<li>Menu 3</li>
			</ul>			
		</li>
		<li>
			Docs
			<ul class="dropdown">
				<li>Menu 1</li>
				<li>Menu 2</li>
			</ul>			
		</li>
		<li>
			Contact
			<ul class="dropdown">
				<li>Menu 1</li>
				<li>Menu 2</li>
				<li>Menu 3</li>
				<li>Menu 4</li>
				<li>Menu 5</li>
			</ul>					
		</li>
	</ul>
</nav>	

// Variables ==========================
$primary: #907dda
$accent: #e5e4ea
$font-light: #e7e6f1
$font-dark: #333

// Base ===============================
html
	height: 100%

body
	display: flex
	flex:
		direction: column
	height: 100%
	background: #F3F4F8

ul.nav
	display: flex
	position: relative
	flex:
		direction: row
	align-items: center
	max-width: 70%
	margin: 0 auto
	padding: 0
	list-style: none
	background: $primary
	border-top-left-radius: 6px
	border-top-right-radius: 6px

	> li
		position: relative
		flex:
			grow: 1
			shrink: 0
		height: 60px
		font:
			size: 14px
		text:
			align: center
			transform: uppercase
		line-height: 60px
		letter-spacing: 1px
		color: $font-light
		cursor: pointer
	
		// CSS States ===============================
		&:hover
			background: rgba(0,0,0,0.1)
	
			ul.dropdown
				visibility: visible
				transform: translate(0,0)
				opacity: 1
				z-index: 0
		
				> li
					animation: 
						name: slideInLeft
						duration: 0.3s
						timing-function: ease-in-out
						fill-mode: backwards
			
		// nth-child ==============================
		&:first-child
			border-top-left-radius: 6px
	
		&:last-child
			border-top-right-radius: 6px				
	
ul.dropdown
	visibility: hidden
	display: flex
	position: absolute
	top: 100%
	left: 0
	right: 0
	flex-direction: column
	margin: 0
	padding: 5px 0 30px
	list-style: none
	color: $font-dark
	background: $accent
	border-bottom-left-radius: 6px
	border-bottom-right-radius: 6px
	box-shadow: 1px 2px 5px -1px rgba(0,0,0,0.15),0px 4px 14px -1px rgba(0,0,0,0.10)
	transform: translate(0,-60px)
	transition: transform 0.2s ease-out, opacity 0.2s, z-index 0s 0.2s
	opacity: 0
	z-index: -1

	> li
		font:
			size: 14px
		cursor: pointer
	
		// CSS State ===========================
		&:hover
			background: rgba(0,0,0,0.06)
	
@keyframes slideInLeft
	from
		transform: translate(-25%,0)
		opacity: 0
	
	to
		transform: translate(0,0)
		opacity: 1
		

	

$( document ).ready(function() {
	
	// Loop through each nav item
	$('nav.navbar').children('ul.nav').children('li').each(function(indexCount){
		
		// loop through each dropdown, count children and apply a animation delay based on their index value
		$(this).children('ul.dropdown').children('li').each(function(index){
			
			// Turn the index value into a reasonable animation delay
			var delay = 0.1 + index*0.03;
			
			// Apply the animation delay
			$(this).css("animation-delay", delay + "s")			
		});
	});
});