带有隐藏溢出的包装器内的 CSS 下拉菜单定位

Question

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

我的问题如下，我有一个模板，其中有几个由 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上看到一个现场示例

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

Answer 1

你在#container .column左浮动有什么原因吗？

如果您删除浮动，然后从#container 中删除overflow:hidden，您的菜单将会显示。