Question

我一直在尝试创建一个菜单，当li到达10时，当我到达我想要的位置时，li应该进入第二个菜单，然后其余的用css代码作为margin-left直接进入下一个方面：100px然后当它再次达到10时它应该到达margin-left：200px然后其余的都采用这种风格..！像这样.. ..

重要的一点是，我希望它可以在一个菜单中完成，而不是在三个菜单中，现在我在三个菜单中完成了但是我想在一个菜单中进行...！

这张图片可能会有所帮助：

http://www.huntedhunter.com/dropdown.png

Answer 1

你基本上可以做的是从左到左对齐。让元素突破界限。

DEMO： http://jsfiddle.net/h1ua00cd/1/

<强> HTML：

<ul>
    <li><a href="#">Something here...</a></li>
    <li><a href="#">Something here...</a></li>
    <li><a href="#">Something here...</a></li>
    <li><a href="#">Something here...</a></li>
    <li><a href="#">Something here...</a></li>
    <li><a href="#">Something here...</a></li>
    <li><a href="#">Something here...</a></li>
    <li><a href="#">Something here...</a></li>
    <li><a href="#">Something here...</a></li>
    <li><a href="#">Something here...</a></li>
    <li><a href="#">Something here...</a></li>
    <li><a href="#">Something here...</a></li>
    <li><a href="#">Something here...</a></li>
    <li><a href="#">Something here...</a></li>
    <li><a href="#">Something here...</a></li>
    <li><a href="#">Something here...</a></li>
    <li><a href="#">Something here...</a></li>
</ul>

<强> CSS：

ul {margin: 0;padding:0;width: 660px;}
ul li {list-style:none;float: left;width:200px;margin-right: 20px;}

如何使用自定义特定的li命令创建垂直菜单？

1 个答案: