在下拉菜單中創建水平和垂直菜單

Question

我正在嘗試做類似於Chrome的菜單，在下拉菜單中我想要水平菜單和垂直在一起。

我的代碼：

 <div id="mobileMenu" > 
     <ul class="nav"> 
       <li><a href="" data-bypass>1</a></li> 
       <li><a href="" data-bypass>2</a></li> 

      <div class="oneLine"> 
       <div class="row-fluid align-center"> 
        <div class="span6"> 
         <li><a href="" data-bypass>3</a></li></div> 
        <div class="span6"> 
         <li><a href="" data-bypass>4</a></li><div></div> 
        </div> 
       </div> 
      </div> 
      <li><a href="" data-bypass>5</a></li> 
      <li><a href="" data-bypass>6</a></li> 
      <li><a href="" data-bypass>7</a></li> 
     </ul> 
    </div> 

我想也許我可以創建其他類，並通過不同的跨度除以本，創建具有「3,4」水平一條線，但它沒」工作。 我嘗試沒有跨只是簡單的CSS：

   .oneLine { 
     li { 
      display: inline; 
a { 
    float: left; 
    clear:both; 
    width:50%; 
border-right: 1px solid #969696;} 
} 
    } 

，並沒有奏效。 也許你知道該怎麼做？

非常感謝！

Answer 1

這樣做有很多可能性。

檢查這一個http://jsfiddle.net/odd1y2nc/1/

<ul> 
    <li>Vertical</li> 
    <li>Vertical</li> 
    <li>Vertical</li> 
    <li>Vertical</li> 
    <li class="horizontal">Horizontal</li> 
    <li class="horizontal">Horizontal</li> 
    <li class="horizontal">Horizontal</li> 
    <li>Vertical</li> 
    <li>Vertical</li> 
    <li>Vertical</li> 
</ul> 

ul { 
    list-style: none; 
} 

ul li { 
    float: left; 
    width: 100%; 
} 
.horizontal { 
    width: 33%; 
}