CSS下拉菜单定位在具有隐藏溢出的包装器中

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

我的问题是,我有一个模板,它有几个由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中:hidden。当子菜单太靠近此分区的右侧,并且列表项太长时,列表将落在包装器的右边框下,使其部分不可见。 溢出:自动为包装器提供一个不需要的滚动条。溢出:Visible解决了这个问题,但是使包装器没有高度,这样背景色和边框就不可见了,这也是它的功能的一部分,所以这也没有帮助。

为了不必引用大量的代码,可以在 http://www.pkr.nl/template/forumdisplay.html

有没有人知道一个解决方案,可以让菜单显示在包装外,或者让它们以一种体面的方式对齐?