<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")     
    });
  });
});