<div class="wrapper">
    <ul class="navigation">
      <li class="menu-item"><a class="first menu-link">Home</a>
        <ul>
          <li class="dropdown"><a href="">item1</a></li>
          <li class="dropdown"><a href="">item2</a></li>
          <li class="dropdown"><a href="">item3</a></li>
          <li class="dropdown"><a href="">item4</a></li>
          <li class="dropdown"><a href="">item5</a></li>
        </ul>  
      </li>
      <li class="menu-item"><a class="second menu-link b">About</a>
        <ul>
          <li class="dropdown"><a href="">item1</a></li>
          <li class="dropdown"><a href="">item2</a></li>
          <li class="dropdown"><a href="">item3</a></li>
          <li class="dropdown"><a href="">item4</a></li>
          <li class="dropdown"><a href="">item5</a></li>
        </ul>  
      </li>
      <li class="menu-item"><a class="third menu-link c">Contact</a>
        <ul>
          <li class="dropdown"><a href="">item1</a></li>
          <li class="dropdown"><a href="">item2</a></li>
          <li class="dropdown"><a href="">item3</a></li>
          <li class="dropdown"><a href="">item4</a></li>
          <li class="dropdown"><a href="">item5</a></li>
        </ul>  
      </li>
    </ul>
</div> 

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Titillium+Web:600);

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
  background: #333333;
}

.wrapper {
  width: 90%;
  margin: 0 auto;
  padding-top: 120px;
}

.navigation {
  width: 100%;
  text-align: center;
  font: normal 1em/1.5em "Titillium Web", helvetica;
  
  li {
    float: left;    
  }
}

.menu-item {
  width: 33.333%;
  position: relative;
  overflow: hidden;
  color: #ffffff;
  
  ul{
    position: absolute;
    left: 9999px;
    opacity: 0;
    transition: all .2s ease-in-out;    
    -webkit-transition: all .2s ease-in-out;
  }
}

a.menu-link {
  display: block;
  padding: 15px;
  margin-bottom: 6px;
}

a {
  
  &.first{
    background: #c0392b;
  }
  
  &.second {
  background: #c8462b;
  }
  
  &.third {
  background: #d3592b;
  }
}

a.second {
  background: #C8462B;
}

.dropdown {
  width: 100%;
  padding: 20px;
  
  & a, a:hover, a:visited, a:focus {
    text-decoration: none;
    color: #222222;
  }
  
  &:first-child {
    border-top: 1px solid rgba(0,0,0,.3)
  }
  
  &:nth-child(even){
    background: #eeeeee;
    transform: perspective(1000px) rotateX(-20deg);
    transform-origin: top;  
    -webkit-transform: perspective(1000px) rotateX(-20deg);
    -webkit-transform-origin: top;
  }
  
  &:nth-child(odd){
    background: #f5f5f5;
    transform: perspective(1000px) rotateX(20deg);
    transform-origin: bottom;
    -webkit-transform: perspective(1000px) rotateX(20deg);
    -webkit-transform-origin: bottom;
    margin-top: -11px;
  }
}

 .menu-item:hover  ul, .menu-item:focus ul {
  position: static;
  bottom: 200px;
  opacity: 1;
}

@media only screen and (max-width: 37.5em){
  
  .navigation li {
    float: none;
    clear: both;
  }
  
  .menu-item {
    width: 100%;  
  }
}