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

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