<div class="dropdown-container">
  <button class="large">Big Dropdown Button</button>
  <div class="dropdown-menu"></div>
</div>

&nbsp;&nbsp;&nbsp;

<div class="dropdown-container">
  <button>Small Dropdown Button</button>
  <div class="dropdown-menu"></div>
</div>

button {
  background: linear-gradient(#fafafa, #eee);
  border: 1px solid #b6bfb6;
  border-radius: 0.2em;
  padding: 0.2em 0.5em;
  cursor: pointer;
  &:hover {
    border-color: #4fb0ff;
  }
  &.large { font-size: 1.2em; }
}

.dropdown-container {
  display: inline-block;
  position: relative;
  
  .dropdown-menu {
    display: none;
    width: 200px;
    min-height: 120px;
    position: absolute;
    z-index: 100;
    top: calc(100% + 0.5em);
    background: linear-gradient(#fafafa, #eee);
    border: 1px solid #b6bfb6;
    border-radius: 0.2em;
    box-shadow: 0 0 10px -5px;
  }
  
  &.active {
    .dropdown-menu { display: block; }
  }
}

// Just enough jquery to get by
$('button').on('click', function() {
  $(this).parent('.dropdown-container').toggleClass('active')
})