0

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

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 制作它？有任何想法吗？谢谢！！

4

2 回答 2

2

如果您只需要坚持使用 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

于 2013-05-06T06:23:49.983 回答