在下拉菜单中创建水平和垂直菜单

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%; 
}