23. Menú horizontal  2 niveles

Fuente: http://codepen.io/waddington/pen/fBicd
a. http://codepen.io/waddington/pen/mloCb
Se instala donde esta el código
Para cambiar posición :
.wrapper {

  margin:0 auto;
  width:804px; 
 position: absolute;
top: 35px;
left: 50px;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d; 
  -webkit-perspective:300px;
  -ms-perspective:300px;
  perspective:300px;
}

<ul class="wrapper">
<li class="list"><a class="non" href="#">Item</a></li>
<li class="list"><a class="non" href="#">Item</a></li>
<li class="wSub"><a class="front"> Hover </a>
<ul class="bottom">
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li><li class="wSub"><a class="front"> Hover </a>
<ul class="bottom">
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li><li class="wSub"><a class="front"> Hover </a>
<ul class="bottom">
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li><li class="wSub"><a class="front"> Hover </a>
<ul class="bottom">
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
<li class="list"><a class="non" href="#">Item</a></li>

</ul>

CSS

body {
  padding:0;
  background-image:url(http://www.cool-backgrounds.org/wallpapers/simple_clouds_background-1920x1080.jpg);
  background-position:center left;
  background-attachment:fixed;
  justify-content: center;
  align-items: center;
  font-family: 'Open Sans', sans-serif;
  color:#1d1d1d;
}
ul, li {
  padding:0;
  margin:0;
  list-style-type:none;
}
.wrapper {
  margin:0 auto;
  width:804px;
  padding: 110px 11px 10px 12px;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d; 
  -webkit-perspective:300px;
  -ms-perspective:300px;
  perspective:300px;
}
.front, .non {
  height:30px;
  width:100px;
  line-height:30px;
  border-radius: 5px;
  border: 1px solid #fff;
  text-align: center;
  background-image:-webkit-linear-gradient(top, #ff7000 70%, #ff560f 100%);
  background-image:linear-gradient(to bottom, #ff7000 70%, #ff560f 100%);
  display:block;
 
}
.bottom {
  background-image:-webkit-linear-gradient(top,#ff7000,#ff560f 40px);
  background-image:linear-gradient(to bottom, #ff7000,#ff560f 40px);
}
.bottom li:hover {
  background-image:-webkit-linear-gradient(top, #ff8931 , #ff5012);
  background-image:linear-gradient(to bottom, #ff8931 , #ff5012);
}
.bottom li:first-of-type {
border-radius: 5px;
  border: 1px solid #fff;
}
.non:hover, .front:hover {
  background-image:-webkit-linear-gradient(top, #ff8931 , #ff5012);
  background-image:linear-gradient(to bottom, #ff8931 , #ff5012);
 
}
.wSub, .list {
  height:30px;
  -webkit-transform-origin: center center -20px;
  -moz-transform-origin: center center -20px;
  -ms-transform-origin: center center -20px;
  -o-transform-origin: center center -20px;
  transform-origin: center center -20px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition:all 500ms ease-in-out 300ms;
  -moz-transition:all 500ms ease-in-out 300ms;
  -ms-transition:all 500ms ease-in-out 300ms;
  -o-transition:all 500ms ease-in-out 300ms;
  transition:all 500ms ease-in-out 300ms;
  display:block;
  cursor:pointer;
  float:left;
}
.bottom {
  height:120px;
  border-radius:0 0 5px 5px;
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  -webkit-transform:rotateX(-90deg);
  -moz-transform:rotateX(-90deg);
  -ms-transform:rotateX(-90deg);
  -o-transform:rotateX(-90deg);
  transform:rotateX(-90deg);
  border-top:none;
  text-align:center;
  line-height:40px;
}
a {
  text-decoration:none;
  color:inherit;
}
.bottom li:last-of-type, .bottom li:last-of-type a {
  border-radius:0 0 5px 5px;  
}
.wSub:hover {
  -webkit-transform:rotateX(90deg);
  -moz-transform:rotateX(90deg);
  -ms-transform:rotateX(90deg);
  -o-transform:rotateX(90deg);
 transform:rotateX(90deg);
  -webkit-transition:all 500ms ease-in-out;
  -moz-transition:all 500ms ease-in-out;
  -ms-transition:all 500ms ease-in-out;
  -o-transition:all 500ms ease-in-out;
  transition:all 500ms ease-in-out;
}
.list:first-of-type .non {
  border-radius:5px 0 0 5px;
  
}
.list:last-of-type .non {
  border-radius:0 5px 5px 0;
   
}
.list, .front {
   border-radius:5px;
  border-right:1px solid #ccc;
   border-left:1px solid #ccc;
  
}
.list:last-of-type {
  border:none;
}
}