Question

我想像这样制作两列下拉菜单。

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或查询来实现？有任何想法吗？谢谢！

Answer 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

Answer 2

答案：谷歌吧。 “CSS多级导航”为我带来了29 800 000个结果。

还有很多其他人。

两列动态下拉菜单

2 个答案: