title: Vertical Flyout menu with pure CSS
body: <p>Please check the below code..</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;      
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
          &lt;title&gt;hover-navigation&lt;/title&gt;
  
          &lt;meta name="description" content=""&gt;
          &lt;meta name="author" content="yesvin"&gt;
          &lt;meta name="viewport" content="width=device-width; initial-scale=1.0"&gt;
  
          &lt;link rel="shortcut icon" href="/favicon.ico"&gt;
          &lt;link rel="apple-touch-icon" href="/apple-touch-icon.png"&gt;
  
          &lt;style&gt;
              html, body {
                  height: 100%;
                  margin: 0;
                  padding: 0;
              }
              .menuContainer{
                  width:100px;
                  height:100vh;
                  background:#ccc;
                  z-index:1;                  
              }
              .menuContainer ul {
                  padding:20px 0 0 0;
                  margin:0;   
              }
              .menuContainer ul li {
                  padding:10px;
                  margin:0;
                  list-style: none;               
                  border-bottom:solid 1px #000;
                  font-family:'Arial';
                  font-size:16px;
                  background:#00ACD6;
                  position: relative;
              }
              .menuContainer ul li:hover{             
                  background:#00A65A;
                  cursor:pointer;
              }
              .menuContainer ul li a{
                  text-decoration:none;               
                  color:#000;             
              }
              .menuContainer ul li:hover a{
                  text-decoration:none;               
                  color:#fff;
              }
              .menuContainer ul li a:after{
                  content:' •'    
              }
  
              .menuContainer ul li ul {               
                  position: absolute;             
                  top:-20px;
                  left:-100px;
                  height:100vh;
                  width:0px;
                  z-index:-1;
  
                  -webkit-transition: width 0.4s, left 0.4s;
                  -o-transition: width 0.4s, left 0.4s;
                  transition: width 0.4s, left 0.4s;
              }
              .menuContainer ul li:hover ul {             
                  left:100px;
                  width:100px;    
              }
          &lt;/style&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="menuContainer"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Frontend&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;HTML&lt;/li&gt;
                          &lt;li&gt;CSS&lt;/li&gt;
                          &lt;li&gt;Javascript&lt;/li&gt;
                      &lt;/ul&gt;                   
                  &lt;/li&gt;                                   
                  &lt;li&gt;&lt;a href="#"&gt;Backend&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;PHP&lt;/li&gt;
                          &lt;li&gt;MYSQL&lt;/li&gt;
                          &lt;li&gt;ASP&lt;/li&gt;
                          &lt;li&gt;JSP&lt;/li&gt;                        
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here the problem is with 'z-index'. Because of that when i hover the 'li' the sub-menu opens, but it hides, when i mouse over the next 'li'</p>
  
  <p>But removing the 'z-index' or maintaining same 'z-index' for both 'container' and 'ul li ul' works fine. But sub-menu animate over the main menu.</p>
  
  <p>I need sub-menu should come behind the container. What will be the workaround for this...</p>
  
  <p>Checkout the fiddle for a demo <a href="http://jsfiddle.net/a92c03zj/1/" rel="nofollow">http://jsfiddle.net/a92c03zj/1/</a></p>
  
  <p>Thanks in advance ...</p>