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

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>

我想也许我可以创建额外的课程，并通过不同的跨度划分它，用＆＃34; 3和4＆＃34;创建一行。水平，但它没有工作。 我只用简单的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%;
}