如何创建包含多列的下拉列表？

Question

我正在尝试在CSS中创建一个下拉菜单，但它将有大约21个子项。因此，我想将它们显示在7列的3列中，但我无法弄清楚如何这样做。

我用一个简单的例子创建了一个jsFiddle，我怎么能修改CSS以便sub sub 6-10显示在sub 1-5的右边，而不是下面的？

它应该如下图所示，它是在MS Paint中创建的。

编辑：

jsFiddle

<nav>
  <ul>
    <li>
      <a href="#">Top Level Group</a>
      <div>
      <ul>
        <li><a href="#">Sub One</a></li>
        <li><a href="#">Sub Two</a></li>
        <li><a href="#">Sub Three</a></li>
        <li><a href="#">Sub Four</a></li>
        <li><a href="#">Sub Five</a></li>
      </ul>
      <ul>
        <li><a href="#">Sub Six</a></li>
        <li><a href="#">Sub Seven</a></li>
        <li><a href="#">Sub Eight</a></li>
        <li><a href="#">Sub Nine</a></li>
        <li><a href="#">Sub Ten</a></li>
      </ul>
      </div>
    </li>
  </ul>
</nav>

Answer 1

使用可以使用float: left使它们堆叠

工作样本：http://jsfiddle.net/07spd07b/2/

#top-level-group{
    width: 200px;
}
#top-level-group ul{
    float: left;
}

在示例中，我从-9999px左侧更改了原始位置，因此您可以在打开jsfiddle时看到它。根据要放入的内容设置宽度。如果你想要更多的列，请给它更宽的宽度。

<强>更新

以下是包含3列且包含clearfix的工作示例：

http://jsfiddle.net/07spd07b/10/

我添加了class clearfix：

.clearfix:before,
.clearfix:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0; }
.clearfix:after {
    clear: both; }
.clearfix {
    zoom: 1; }

清除浮动元素并将width: 250px;设置为适合3列。希望它有所帮助。

Answer 2

使用display:inline-block;：

可以非常轻松地完成

nav ul li ul{
display:inline-block;
margin: 0;
padding: 0;
}

然后你只需要给div一个宽度：

nav ul li div {
position: absolute;
left: -9999px;
width:300px;
}

JSFiddle Demo
要添加更多列，只需添加更多<ul>并将宽度设置得更宽。

Answer 3

请立即查看此链接..我已在<ul>标记和样式中添加了两个类。

http://jsfiddle.net/07spd07b/