A CodePen by Mojtaba Seyedi. Quick Menu - Inspired by Eric Benjamin's work on Dribbble http://drbl.in/gjkr

index.html

<nav>
  <menu>
    <li>
      <a href="#" class="icon-reorder"></a>
      <menu>
        <li><a href="#" class="icon-cog"></a></li>
        <li><a href="#"class="icon-phone"></a></li>
        <li><a href="#" class="icon-bolt"></a></li>
      </menu>
    </li>
  </menu>
</nav>

style.css

body {
  background-image: url('http://mojoimage.com/free-image-hosting-12/371bg.png');
}

nav {
  width  		  : 78px;
  margin      : 15px auto;
  box-shadow  : 0 -2px 0 3px rgba(200,200,200,.6);
}

menu {
  background    : #514954;
}

nav,nav > menu , nav > menu > li{
  border-radius : 5px 5px 0 0;
}

li {
  text-align : center;
  list-style-type : none;
}

a {
  display         : block;
  color           : #FFF;
  padding         : 10px 12px;
  text-decoration : none;
  font-size       : 30px;
}

li menu {
  position : absolute;
  top      : 100%;
  left     : 0;
  padding  : 8px;
  border-radius : 0 0 5px 5px;
  box-shadow    : 0 2px 0 3px rgba(200,200,200,.4);
  -webkit-transform-origin : 100% top;
  -webkit-transform        : rotateX(-87deg); 
  -webkit-transition       : .3s linear all;
}

nav > menu > li {
  position   : relative;
  -webkit-perspective : 500px;
}

li:hover menu {
  -webkit-transition : .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
  -webkit-transform  : rotateX(0);
}

li:hover > a {
  color : #FF0;
  text-shadow : 1px 1px 0 #aaa , 2px 2px 0 #000;
}

li menu li:first-child {
  background: -webkit-linear-gradient(rgba(92,84,95,1) 0%, rgba(99,91,102,1) 2%, rgba(100,92,103,1) 5%, rgba(98,90,101,1) 7%, rgba(100,92,103,1) 10%, rgba(97,89,100,1) 15%, rgba(98,92,104,1) 59%, rgba(97,91,101,1) 100%);
}

menu li:nth-child(2) {
  background: -webkit-linear-gradient(top,  rgba(99,91,102,1) 0%,rgba(115,107,118,1) 5%,rgba(116,108,119,1) 7%,rgba(114,106,117,1) 9%,rgba(114,106,117,1) 100%);
}	

li menu li:last-child {
  background: -webkit-linear-gradient(top,  rgba(123,117,127,1) 0%,rgba(133,127,137,1) 2%,rgba(135,129,139,1) 5%,rgba(130,124,134,1) 7%,rgba(133,127,137,1) 12%,rgba(132,126,136,1) 100%);
}