Question

I’ve encountered an interesting problem. I have a div that is a container around a menu.

If i set overflow : hidden on the menu, the the parts of the menu that overflow are hidden.

Instead of hiding them, I’d like to simply resize the ‘group-list’ menu flyout so that it’ll stay inside my menu.

Here’s a fiddle: http://jsfiddle.net/uW9nG/

In the fiddle, you’ll see that if you mouseOver A, it flys out over the blue container. If you Toggle the overflow, the overflow will be hidden.

How can I make the overflow simply resize the group-list so that it fits in the container?

(I’ve been working on this math all morning, and can’t quite get it..)

Answer 1

Your groupList is currently being given a margin-top, but it would be simpler to make it position:absolute and then pull it up -50px (to match the 50px you pushed the <ul id='test-two'> down. See fiddle.

groupList.css({
    'top': '-50px',
    'position': 'absolute'
});

If your #test-two wasn’t positioned, you could just give groupList 0px for the top.