jQuery plugin not overlapping DIV?

I'm trying to use the dropdown multiselect widget found at: http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/#disqus_thread

Now 开发者_如何学运维please take a look at: http://jsfiddle.net/mdrago/MNekN/4/

I ran into this particular problem were the dropdown will no overlap the middle DIV. I'm pretty sure is not an issue with the widget since this same kind of problem happened before with other controls.

I cant resize the middle DIV since a map will be shown there.

What I'm doing wrong?

The problem is that the selection box is wrapped in #framecontentTop, which has a fixed height and also has overflow:hidden set. This tells the browser to crop the content and don't render anything outside the bounds of the div.

The solution is to change the CSS of #framecontentTop to overflow:visible; z-index:1;. This will render the whole content of the div, even if it falls outside and makes sure it's on top of everything else without an explicit z-index set. The child elements outside the div will render using the parent's z-index, so your selection box will be on top of the absolutely positioned map box.