title: Make submenu vertical layout in an existing nav menu
body: <p>I have a menu nav function in css3 and html</p>
  
  <pre><code>&lt;nav&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#" &gt;Sec1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" &gt;Sec2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="current"&gt;Sec3&lt;/a&gt;
      &lt;ul class="menu"&gt;
          &lt;li&gt;&lt;a href="#" class="documents"&gt;Documents&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="messages"&gt;Messages&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="signout"&gt;Sign Out&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" &gt;Sec4&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>but How can the submenu be like:</p>
  
  <p><img src="https://i.stack.imgur.com/MnFR9.png" alt="enter image description here"></p>
  
  <p>instead of:</p>
  
  <p><img src="https://i.stack.imgur.com/lySfg.png" alt="enter image description here"></p>
  
  <p><strong>--Fiddle-</strong>
  <a href="http://jsfiddle.net/mhJXt/30/" rel="nofollow noreferrer">here is fiddle</a></p>