动态下拉菜单的两列答案

【问题标题】：two columns for dynamic drop down menu动态下拉菜单的两列
【发布时间】：2013-05-06 03:21:07
【问题描述】：

我想做一个这样的两列下拉菜单。

Main Menu 1 | Main Menu 2 | Main Menu 3
Sub Menu 1 | Sub Menu 5
Sub Menu 2 | Sub Menu 6
Sub Menu 3 | Sub Menu 7
Sub Menu 4

这是我的代码。

<style>
ul{
list-style:none;
}
li{
float:left;
}
li li {
width:50%;
}
</style>
<ul>
<li><a href="link1.html" target="_self">Main Menu 1</a>
<ul>
<li><a href="sub1.html" target="_self">Sub Menu 1</a></li>
<li><a href="sub2.html" target="_self">Sub Menu 2</a></li>
<li><a href="sub3.html" target="_self">Sub Menu 3</a></li>
<li><a href="sub4.html" target="_self">Sub Menu 4</a></li>
<li><a href="sub5.html" target="_self">Sub Menu 5</a></li>
<li><a href="sub6.html" target="_self">Sub Menu 6</a></li>
<li><a href="sub6.html" target="_self">Sub Menu 7</a></li>
</ul>
</li>
<li><a href="link2.html" target="_self">Main Menu 2</a></li>
<li><a href="#" target="_self" >Main Menu 1</a></li>
</ul>

但是如果我使用左浮动，它就会变成这个。

Main Menu 1 | Main Menu 2 | Main Menu 3
Sub Menu 1 | Sub Menu 2
Sub Menu 3 | Sub Menu 4
Sub Menu 5 | Sub Menu 6
Sub Menu 7

如何通过 CSS 或 Query 实现？有任何想法吗？谢谢！！

【问题讨论】：

标签： html css

【解决方案1】：

如果您只需要坚持使用 HTML，您可以重新排列列表项以交替排列：

<ul>
<li><a href="sub1.html" target="_self">Sub Menu 1</a></li>
<li><a href="sub5.html" target="_self">Sub Menu 5</a></li>
<li><a href="sub2.html" target="_self">Sub Menu 2</a></li>
<li><a href="sub6.html" target="_self">Sub Menu 6</a></li>
<li><a href="sub3.html" target="_self">Sub Menu 3</a></li>
<li><a href="sub7.html" target="_self">Sub Menu 7</a></li>
<li><a href="sub4.html" target="_self">Sub Menu 4</a></li>
</ul>

这不是很好，但很有效。

或者，您可以将列表分成两个列表（也不是最佳解决方案）。

<ul class="col1">
<li><a href="sub1.html" target="_self">Sub Menu 1</a></li>
<li><a href="sub2.html" target="_self">Sub Menu 2</a></li>
<li><a href="sub3.html" target="_self">Sub Menu 3</a></li>
<li><a href="sub4.html" target="_self">Sub Menu 4</a></li>
</ul>
<ul class="col2">
<li><a href="sub5.html" target="_self">Sub Menu 5</a></li>
<li><a href="sub6.html" target="_self">Sub Menu 6</a></li>
<li><a href="sub6.html" target="_self">Sub Menu 7</a></li>
</ul>

如果您的内容是在其他地方生成的，或者由于某种原因您无法调整列表，A List Apart 有一篇很好的文章：http://alistapart.com/article/multicolumnlists

【讨论】：

非常有用的文章。谢谢！！

【解决方案2】：

答案：谷歌一下。 “CSS 多级导航”给我带来了 2980 万条结果。

还有很多其他的。

【讨论】：

感谢您的回复。其实我可以做多级导航。但我想做一个两列导航，不希望两列像我的例子一样左右左右。有什么想法吗？
在这种情况下，这里：stackoverflow.com/questions/13104818/…。您只需将其嵌入到您的子菜单中