1

我知道，一个模糊的标题，但很难用一句话来描述我想要什么。

我的问题如下，我有一个模板，其中有几个由 jQuery 激活的下拉菜单。下拉列表显示为一级列表中的二级导航项，如下所示：

<ul class="tools">
  <li class="dropdown">
    <a href="#">Tools</a>
    <ul class="submenu">
      <li><a href="/">Option 1</a></li>
      <li><a href="/">Option 2</a></li>
      <li><a href="/">Option 3</a></li>
    </ul>
  </li>
  <li><a href="/">More</a></li>
</ul>

子菜单默认是隐藏的，可以通过单击它所属的列表项来显示（在本例中为“工具”）。子菜单是绝对定位的，因此当它显示时，它总是位于单击的链接下方。这一切都很好。

问题是所有这些都包含在一个具有溢出：隐藏的 div 中。当子菜单太靠近这个 div 的右侧，并且列表项太长时，列表会落在包装器的右边框下，使其部分不可见。Overflow: auto 给包装器一个滚动条，这是不需要的。Overflow: visible 解决了这个问题，但是使包装器没有高度，因此背景颜色和边框不可见，这是它的功能的一部分，所以这也无济于事。

为了不必引用一大堆代码，可以在http://www.pkr.nl/template/forumdisplay.html

有谁知道一种解决方案，可以使菜单显示在包装器之外，或者使它们以一种体面的方式与其对齐？

4

1 回答 1

1

#container .column你向左飘是有原因的吗？

如果你删除浮动然后删除overflow:hiddenfrom #container，你的菜单就会出现。

于 2009-08-21T11:27:43.540 回答