Tema de Twitter Bootstrap Acordeón y desbordamiento de botón desplegable

Estoy usando Bootstrap para una sección de mi sitio web. Mezclo el acordeón con un botón desplegable. El problema surge cuando el botón está en la parte inferior, el menú desplegable está oculto ya que el desbordamiento de .accordion-body está configurado como oculto.

Puedes ver jsfiddle aquí:http://jsfiddle.net/DBQU7/6/

Así que hice lo que esperabas, traté de hacer.overflow-y:visible. Pero luego puedes ver el resultado aquí, no funciona: (También puedes notar que el menú desplegable está dentro de la div, lo que crea una barra de desplazamiento dentro de la div en lugar de aparecer.

http://jsfiddle.net/DBQU7/5/

Vi esta pregunta que era similar:Twiiter Bootstrap (Button Dropdown) + Div Fixed

Pero no soluciona el problema como mencioné anteriormente.

Entonces la pregunta es, ¿cómo puedo hacer que el menú desplegable se muestre normalmente?

Gracias.

La única solución que encontré hasta ahora (y me complacería que se demostrara que estaba equivocada) fue agregar una propiedad CSS que hiciera visible el desbordamiento cuando estaba abierto y luego, a través de un script JS, haga que cambie entre visible y oculto ... No ideal, pero nada mejor hasta ahora.

- Editado - En realidad no funciona muy bien y no parece ser una solución viable.

Respuestas a la pregunta(10)

Su respuesta a la pregunta