<nav class="main-navigation">
  <button type="button" class="entry is-dropdown" data-dropdown-trigger>Resources</button>
  <button type="button" class="entry is-dropdown" data-dropdown-trigger>Customers</button>
  <a href="#" class="entry">Contact</a>
</nav>

<ul class="menu-dropdown is-hidden">
  <li class="item">
    <h3 class="title">Designs</h3>
    <p class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, amet?</p>
    <a class="link" href="#">More</a>
  </li>
  <li class="item">
    <h3 class="title">Tutorials</h3>
    <p class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, amet?</p>
    <a class="link" href="#">More</a>
  </li>
  <li class="item">
    <h3 class="title">Templates</h3>
    <p class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, amet?</p>
    <a class="link" href="#">More</a>
  </li>
  <li class="item">
    <h3 class="title">Mockups</h3>
    <p class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, amet?</p>
    <a class="link" href="#">More</a>
  </li>
</ul>
$accent-color: #2CB1BC;
$text-color: #334E68;
$bg-color: #D9E2EC;

* {
  box-sizing: border-box;
}

body {
  font: normal 14px/1.4 "Source Sans Pro", sans-serif;
  background-color: $bg-color;
  color: $text-color;
  margin: 2rem;
}


/* Navigation */
.main-navigation {
  background-color: white;
  padding: 1.5rem 2rem;
  border-radius: .3em;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .05);
  display: flex;
  align-items: center;
  
  &.is-expanded {
    border-bottom-left-radius: 0;
  }
  
  > .entry {
    font: inherit;
    color: inherit;
    text-decoration: unset;
    border: unset;
    background-color: unset;
    padding: unset;
    font-weight: 600;
    cursor: pointer;
    margin-right: 2rem;
    transition: color .1s linear;
    position: relative;
    
    &.is-dropdown {
      padding-right: 1rem;
      
      &::after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-top: 8px solid $accent-color;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        top: 7px;
        right: 0px;
      }
    }
    
    &:hover, &:focus {
      color: $accent-color;
    }
  }
}


/* Dropdown */
.menu-dropdown {
  background-color: white;
  position: absolute;
  margin: unset;
  padding: 1.5rem 2rem;
  list-style: none;
  border-radius: 0 0 .3em .3em;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .05);
  display: flex;
  flex-wrap: wrap;
  max-width: 650px;
  border-top: 3px solid $accent-color;
  
  &.is-hidden {
    display: none;
  }
  
  > .item {
    flex: 0 0 50%;
    
    &:nth-child(odd) {
      padding-right: 1rem;
    }
    
    &:nth-child(even) {
      padding-left: 1rem;
    }
    
    &:first-child,
    &:nth-child(2) {
      margin-bottom: 2rem;
    }
  
    > .title {
      margin: unset;
    }
    
    > .text {
      margin-top: unset;
      color: lighten($text-color, 25%);
    }
    
    > .link {
      color: $accent-color;
      font-weight: 600;
      text-decoration: unset;
      transition: color .1s linear;
      
      &:hover, &:focus {
        color: $text-color;
      }
    }
  }
}
View Compiled
var menu = document.querySelector(".menu-dropdown");
var navigation = document.querySelector(".main-navigation");

function handleClick(evt) {
  // Only if a click on a dropdown trigger happens, either close or open it.
  if (evt.target.hasAttribute("data-dropdown-trigger")) {
    if (menu.classList.contains("is-hidden")) {
      menu.classList.remove("is-hidden");
      navigation.classList.add("is-expanded");
    } else {
      menu.classList.add("is-hidden");
      navigation.classList.remove("is-expanded");
    }
    
    return;
  }
  
  // If a click happens somewhere outside the dropdown, close it.
  if (!evt.target.closest(".menu-dropdown")) {
    menu.classList.add("is-hidden");
    navigation.classList.remove("is-expanded");
  }
}

window.addEventListener("click", handleClick);

External CSS

  1. https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.