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

我正在尝试做类似于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;}
 }
   }

而且没有用
也许您知道该怎么做？

非常感谢！

最佳答案

这样做的可能性很大。

选中此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%;
}

关于css - 在下拉菜单中创建水平和垂直菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27554733/