title: Create horizontal and vertical menu inside drop down menu
body: <p>I am trying to do menu similar to Chrome, inside drop down menu I want horizontal menu and vertical together.</p>
  
  <p><img src="https://i.stack.imgur.com/Fd99k.png" alt="enter image description here"></p>
  
  <p>my code:</p>
  
  <pre><code>        &lt;div id="mobileMenu" &gt;
          &lt;ul class="nav"&gt;
                  &lt;li&gt;&lt;a href="" data-bypass&gt;1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="" data-bypass&gt;2&lt;/a&gt;&lt;/li&gt;
  
              &lt;div class="oneLine"&gt;
                  &lt;div class="row-fluid align-center"&gt;
                      &lt;div class="span6"&gt;
                          &lt;li&gt;&lt;a href="" data-bypass&gt;3&lt;/a&gt;&lt;/li&gt;&lt;/div&gt;
                      &lt;div class="span6"&gt;
                          &lt;li&gt;&lt;a href="" data-bypass&gt;4&lt;/a&gt;&lt;/li&gt;&lt;div&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;li&gt;&lt;a href="" data-bypass&gt;5&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="" data-bypass&gt;6&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="" data-bypass&gt;7&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I thought maybe I can create additional class and divide this by different spans, to create one line with "3 and 4" horizontal, but it didn't work.
  I tried without spans just with simple css:</p>
  
  <pre><code>                .oneLine {
          li {
              display: inline;
  a {
      float: left;
      clear:both;
      width:50%;
  border-right: 1px solid #969696;}
   }   
     }
  </code></pre>
  
  <p>and it didn't work.
  Maybe do you know how to do this?</p>
  
  <p>Thanks a lot!</p>