CSS dropdown-menu positioning inside a wrapper with hidden overflow

Question

I know, a vague title but it's hard to describe what I want in one sentence.

My problem is as follows, I have a template with several dropdown menus activated by jQuery. The dropdown lists appear as second level navigational items within a the first-level list, as follows:

<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>

The submenu is hidden by default, and can be shown by clicking the list item it belongs to (in this case 'tools'). The submenu is positioned absolute, so that when it shows it's always just below the clicked link. This all works perfectly fine.

The problem is that all this is wrapped in a div that has an overflow: hidden. When the submenu is too close to the right side of this div, and the list items are too long, the list falls under the right border of the wrapper, rendering it partly invisible. Overflow: auto gives the wrapper a scrollbar, which is unwanted. Overflow: visible solves the problem, but makes the wrapper have no height so that the background color and borders aren't visible, which is part of it's function, so that doesn't help either.

To not have to quote a large bunch of code, a live example can be seen on http://www.pkr.nl/template/forumdisplay.html

Does anyone know a solution that will make the menus either show outside the wrapper, or that makes them align to it's right in a decent way?

Answer 1

Is there a reason you are floating #container .column left?

If you remove the float and then remove the overflow:hidden from #container , your menu will show up.