I have the following code on my page:

<div style="width:200px;height:200px;overflow:auto; border:2px solid silver;">





<!-- Other HTML -->


<div style="..." Onclick="ShowHideDropDiv()">Drop-Down Title</div>


<div style="border:1px solid black; height:150px; overflow-y:scroll; display:none; position:absolute;" id="divDropDiv">


<!-- Loads of checkboxes -->


</div>





</div>

It is trying to emulate the behaviour of a drop-down-menu as much as possible, but allowing users to select multiple options using the checkboxes.

The problem is that when ShowHideDropDiv makes divDropDiv visible, it does not float nicely above the main div, it stays inside it, causing it to show a scrollbar - not very nicely user friendly!

How can I fix this, so that divDropDiv floats on top properly?

Its hard to say what the problem is here because it looks correct to me.
One thing that I can think of is that the text after the checkboxes is too long to you get an vertical scrollbar you can correct chaning the style in divDropDiv too:

<div style="width:100%;border:1px solid black; height:150px; overflow-y:scroll;overflow-x:hidden; display:block; position:absolute;" id="divDropDiv">

you have to add to the style "Z-INDEX: 1;"

that tells the browser its a overlay

Thats not worked, however, I took out the overflow:auto; bit in the outside div - the content shouldn't be overflowing anyway, and that's fixed it.

Thanks!