如何创建多列下拉菜单？

问题描述：

我想在CSS中创建一个下拉菜单，但它将有大约21个子项目。因此，我想在7列的3列中展示它们，但我无法弄清楚如何去做。如何创建多列下拉菜单？

我用一个简单的例子创建了一个jsFiddle，我如何修改CSS以使子6-10显示在子1-5的右侧，而不是如下所示？

它应该看起来像下图，它是在MS Paint中创建的。

编辑：

enter image description here

<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>

我们可以链接到jsFiddle吗？ – 2014-09-03 18:29:24

请分享你的代码你做了什么如此之快...尝试使用jsfiddle.net创建代码演示并共享！这将会更有帮助！ – UID 2014-09-03 18:29:44

对不起，我忘了链接，我只是编辑我的帖子，包括 – user184994 2014-09-03 18:30:12

答

使用可以使用float: left使他们堆放

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

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

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

UPDATE

这里是3列的工作样品和clearfix包括：

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

我添加类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列。希望能帮助到你。

宽度应该增加，以允许第三列，但这个工程太棒了！ – bobbyg603 2014-09-03 18:36:20

哦，对不起，忘了他想要3列 – 2014-09-03 18:36:56

完美的感谢，我曾尝试过'float：left'，但从来没有想过设置父母的宽度！仍然很多学习 – user184994 2014-09-03 18:37:42

答

它可以很容易地通过使用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>'s并将宽度设置得更宽。

答

请现在检查这个链接..我已经添加了两个类<ul>标签和样式。

http://jsfiddle.net/07spd07b/

如何创建多列下拉菜单？

相关推荐