Question

新手问题：我正在努力构建一个动态生成的超级菜单。每个超级菜单显示几个子菜单和链接。因为我不知道会有多少个子菜单和链接，所以我的布局有问题。我现在的想法是在生成菜单时使用此结构：

  <div class="container">
    <ul class="submenus">
    <li><div class="block">
      <h4>Submenu1</h4>
      <a>link1</a>
      <a><link2</a>
    </div></li>
    <li><div class="block">
      <h4>SubMenu2</h4>
      <a>Link3</a>
    </div></li>
    </ul>
  </div>

我在布局方面遇到了很多麻烦。我将容器宽度放入窗口，然后向左流动。但我一直得到这样的菜单：

子菜单1子菜单2子菜单3子菜单4 Submenu5

是否有更好的方法来生成布局，使其更加对称？我希望它看起来像这样：

子菜单1子菜单2⼦菜单3子菜单4
Submenu5

提前谢谢！

Answer 1

在ul标签中嵌套div是无效的html！

你最好在div标签中制作几个列表，以便你可以定位它们

<div id="firstlist">
<ul id="list1">
<li></li>...
</ul>
</div>

<div id="secondlist">
<ul id="list2">
<li></li>...
</ul>
</div>

现在您可以使用css定位列表。

希望这会有所帮助

Answer 2

试试这个：

.container, .submenus {
    width:100%;
    margin:0;
    padding:0;
}

.submenus li {
    display:block;
    float:left;
    width:50%;
}

演示：http://jsfiddle.net/AlienWebguy/8CThT/

Mega菜单有帮助吗？

2 个答案: