html - CSS Folding Paper Like Menu Issue -

I'm trying to create a menu that would have a paper-like transition, just like this:

Live test: < P> Here's my code:

HTML

  & lt; Nav> & Lt; Li class = "hove" & gt; Hover Me! & Lt; Ul class = "main" & gt; & Lt; Li & gt; Item 1 & lt; / Li & gt; & Lt; Li & gt; ITEM2 & lt; / Li & gt; & Lt; Li & gt; ITEM3 & lt; / Li & gt; & Lt; Li & gt; Item4 & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Neo & gt;   
 css  
  nav {} ul, li {margin: 0; Padding: 0; }. Silence {Position: Absolute; Z-index: 1; }. Man Li {List-style: None; Background: blue; Width: 100px; Padding: 0 5px; Limit: 1px solid black; Height: 30px; Line-height: 30px; / * Margin-top: -30px; * / -Wbkit-Infection: All .5s Easy-In-Out; }. Man Lee: nth-child (strange) {-webkit-transform-origin: top; -Widk-conversion: Perspective (350 pixels) rotate X (-90 degrees); }. Man Lee: nth-child (even) {-webkit-transform-origin: bottom; Webkit-Conversion: Perspective (350px) Rotate X (90 degree); }. Main {-webkit-transition: all .5s easily out; -WebKit-Transformation-Origin: 50% 0%; -Widk-conversion: Perspective (350 pixels) rotate X (-90 degrees); }. Hov: hover. Main {-webkit-transform-origin: top; Webkit-Conversion: Perspective (350px) rotateX (0deg); }. Hov: Hove Lee: nth-child (Strange) {-webkit-transform-origin: top; Webkit-Conversion: Perspective (350px) rotateX (0deg); Margin top: 0; }. Hov: Hover Lee: nth-child (even) {-webkit-transform-origin: bottom; Webkit-Conversion: Perspective (350px) rotateX (0deg); Margin top: 0; }. Man Lee: First child {margin-top: 0; } .hov {status: relative; Height: 40px; Width: 112px; Background: green; White color; Font size: 13px; Font-family: helvetica; font-weight: bold; Text align: center; Line-height: 40px; List-style: none; Z-index: 2; }   
 live demo  
  
  Question:   
 How can I sub As an example - the menu is to be together?   
 
 
 He wants to stick to the sub-menu.  
 To do this, edit the CSS class below here:  
  .mai Lee: nth-child (even) {margin-top: 65 px; -webkit-change-origin: bottom; Webkit-Conversion: Perspective (350px) Rotate X (90 degree); }. Hov: Hove Lee: nth-child (Strange) {-webkit-transform-origin: top; Webkit-Conversion: Perspective (30px) rotateX (0deg); Margin top: 0; }. Hov: Hover Lee: nth-child (even) {-webkit-transform-origin: bottom; Webkit-Conversion: Perspective (30px) rotateX (0deg); Margin top: 0; }   
 And then it is actually close to other effects.  
 Update:  
 Example. 
 
 -cod-css lang-css prettyprint-override ">  nav {} ul, li {margin: 0; Padding: 0; }. Silence {Position: Absolute; Z-index: 1; }. Man Li {List-style: None; Background: blue; Width: 100px; Padding: 0 5px; Limit: 1px solid black; Height: 30px; Line-height: 30px; / * Margin-top: -30px; * / -Wbkit-Infection: All .5s Easy-In-Out; }. Man Lee: nth-child (strange) {-webkit-transform-origin: top; -Widk-conversion: Perspective (350 pixels) rotate X (-90 degrees); }. Man Lee: nth-child (even) {margin-top: -65px; -webkit-change-origin: bottom; Webkit-Conversion: Perspective (350px) Rotate X (90 degree); }. Main {-webkit-transition: all .5s smooth-out-out; -WebKit-Transformation-Origin: 50% 0%; -Widk-conversion: Perspective (350 pixels) rotate X (-90 degrees); }. Hov: hover. Main {-webkit-transform-origin: top; Webkit-Conversion: Perspective (350px) rotateX (0deg); }. Hov: Hove Lee: nth-child (Strange) {-webkit-transform-origin: top; Webkit-Conversion: Perspective (30px) rotateX (0deg); Margin top: 0; }. Hov: Hover Lee: nth-child (even) {-webkit-transform-origin: bottom; Webkit-Conversion: Perspective (30px) rotateX (0deg); Margin top: 0; }. Man Lee: First child {margin-top: 0; } .hov {status: relative; Height: 40px; Width: 112px; Background: green; White color; Font size: 13px; Font-family: helvetica; font-weight: bold; Text align: center; Line-height: 40px; List-style: none; Z-index: 2; }   
  & lt; Nav> & Lt; Li class = "hove" & gt; Hover Me! & Lt; Ul class = "main" & gt; & Lt; Li & gt; Item 1 & lt; / Li & gt; & Lt; Li & gt; ITEM2 & lt; / Li & gt; & Lt; Li & gt; ITEM3 & lt; / Li & gt; & Lt; Li & gt; Item4 & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Nav>