<div class="wrapper">
 <div class="dropdown">
  <div class="item collapse">Item 2</div>
  <div class="item collapse">Item 2</div>
  <div class="item collapse">Item 2</div>
  <div class="item collapse">Select Item</div>
</div>
  
  
  <div class="dropdown">
  <div class="item collapse">Item 2</div>
  <div class="item collapse">Item 2</div>
  <div class="item collapse">Item 2</div>
  <div class="item collapse">Select Item</div>
</div> 
</div>

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);

// colors
$shadow: hsla(0, 0%, 0%, .2);
$item-background: white;
$bgcolor: hsl(0, 79%, 60%);

// settings
$width: 300px;
$height: 50px;

body {
  background-color: $bgcolor;
  font-family: 'Source Sans Pro', Arial, sans-serif;
}
.wrapper{
  display: flex;
  justify-content: space-between;
  max-width:850px;
  margin: 0 auto;
}
.dropdown {
  width: $width+30px;
  height: $height;
  margin: 40px auto;
  perspective: 1000px;
  box-shadow: 0 5px 10px $shadow;
}

.dropped {
  height: $height * 4;
}

.item {
  width: $width;
  height: $height;
  line-height: $height;
  box-shadow: 0 2px 5px $shadow;
  margin: 0 0;
  padding: 0 20px;
  background-color: $item-background;
  transition: transform .15s linear;
  cursor: pointer;
  user-select: none;
  
  &:last-child {
    transform: translate3d(0, -($height * 3), 0)
  }
  &:not(:last-child) {
    transform: translate3d(0, $height, 0);
  }
  &:hover {
    &:not(:last-child) {
      background-color: darken(white, 2%);
    }
  }
}

.collapse {
  @for $i from 1 through 4 {
    &:nth-of-type(#{$i}) {
      transform: translate3d(0, -(($height+6px) * ($i - 1)), 0)
                 scale(1 + ($i/40))
    }
    &:nth-of-type(1) {
      transform: translate3d(0, 0, 0);
    }
  }
  
  &:hover {
    &:last-child {
      transform-origin: 50% 100%;
      transform: translate3d(0, -(($height+8px) * 3), 0) 
                 rotateX(30deg)
                 scale(1.10);
    }
  }
}

const dropdown = $('.dropdown');

dropdown.on('click', function () {
  $(this).children($('.item')).toggleClass('collapse');

  if ($(this).hasClass('dropped')) {
    $(this).removeClass('dropped');
  } else {
    setTimeout(() => {
      $(this).addClass('dropped');
    }, 150);
  }
});