Crossing the bounds of an overflow:hidden wrapper

Question

bit of a pickle here:

Got a large jquery.cycle carousel, the slides of which are div elements with loads of stuff inside of them.

Rough markup:

<div id="carousel">
    <div class="slide">slide content</div>
    <div class="slide">slide content</div>
    <div class="slide">slide content</div>
</div>

The problem is that the "carousel" div has to have orverflow:hidden; set on it to prevent a few bugs, however I need some of the elements in certain slides to display drop-down lists on mouseover, when I do this, the drop-down goes beyond the bounds of the carousel wrapper and is cut off. My first instinct was to use z-index, but that didn't work.

Any ideas on how to "go beyond the bonds"?

Answer 1

You could use position: absolute on the drop down, but I do not recommend that.

Try removing the overflow: hidden; and put a height and width on.

Answer 2

you could go with position:absolute for that dropdown list, but it's ugly.

try losing overflow:hidden, and using overflow:visible instead, it's the most correct way to go in your case, donno though how easy or hard it would be.