Question

I’m using this drop down menu: css-tricks simple jquery drop down, and I need it to show up fully within another div.

My div is a draggable $('#textbox'). You can see it in the jsfiddle here: http://jsfiddle.net/asaakius/5nGYS/13/. I’ve put the relevant CSS within this jsfiddle.

You’ll see there’s a draggable box with an x, this the the menu that can be rolled over. The problem is that the menu should show up inside the textbox, but it doesn’t. I think it’s because it overflows out of $('#textbox') on the right. Is there a way this menu can be oriented to show up on the left?

I’ve also put a flat x on the side of the page, not part of any container, so you know how the menu looks when it works fine.

Answer 1

Demo here.
Here’s what I did:
First, the drop-down menu inside the draggable wasn’t showing up at all. I put the dropdown menu ul inside the li that has the “x” button. Then, in the CSS rule for ul.dropdown ul (right after /* LEVEL TWO */), I changed left: 0; to right: 0; and changed the width to make it fit inside the draggable.
Hope this helps!
Note: if you want the dropdown text to be aligned right, add text-align: right; to the ul.dropdown ul rule.