制作 CSS 下拉菜单 2 列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6207957/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make CSS Drop Down Menu 2 Columns
提问by Jeff Thomas
I currently have a css <ul><li>dropdown menu that uses the following code. Unfortunately I want the sub menus to display in 2 columns as there are about 16 items in that submenu. Does anyone know how to use the following code to make this drop down menu 2 columns?
我目前有一个<ul><li>使用以下代码的 css下拉菜单。不幸的是，我希望子菜单显示在 2 列中，因为该子菜单中有大约 16 个项目。有谁知道如何使用以下代码使这个下拉菜单有 2 列？
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
}
.menu ul{
background:#006633;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#006633 url("../images/seperator.gif") bottom right no-repeat;
color:#ffffff;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #003f20 url("../images/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#006633;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('../images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:30px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#003f20 url('../images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
回答by Michael Jasper
2018 edit
2018年编辑
Hey, 7 years later the columnscss propertyis well supported
嘿嘿，7年后columnscss属性得到很好的支持
ul{
columns: 2;
}<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
<li>fourth item</li>
<li>fifth item</li>
</ul>You could probably get a similar effect with the very robust grid
您可能会使用非常强大的网格获得类似的效果
2011 original answer
2011 原始答案
Make the ultwice as wide as the li's and float the li's left
使ul宽度是li's的两倍，并将 li 的左侧浮动
http://www.behemothdan.com/2011/05/faux-mega-menu-in-wordpress/
http://www.behemothdan.com/2011/05/faux-mega-menu-in-wordpress/
回答by Barry
To make the listings display alpha down instead of across, wrap half of the <li>'s in a div, and the other half in another div. Then float the divs left.
要使列表显示 alpha 向下而不是横向，请将<li>的一半包裹在一个 div 中，另一半包裹在另一个 div 中。然后向左浮动div。
回答by user2124951
I have just wrote a short tute on that http://www.prowebdesign.ro/wordpress-sub-menu-items-split-in-2-columns-the-easy-way/. Basically, it expands the answer of Michael Jasper, but offers a tad more flexibility: you can have 2 columns for selected sub-menus only.
我刚刚写了一篇关于http://www.prowebdesign.ro/wordpress-sub-menu-items-split-in-2-columns-the-easy-way/的简短文章。基本上，它扩展了 Michael Jasper 的答案，但提供了更多的灵活性：您只能为选定的子菜单设置 2 列。
