使溢出调整大小以适应div内部

Question

我遇到了一个有趣的问题。我有一个div，它是菜单周围的容器。

如果我在菜单上设置overflow : hidden，则会隐藏溢出的菜单部分。

我不想隐藏它们，而是简单地调整'group-list'菜单弹出窗口的大小，以便它保留在我的菜单中。

这是一个小提琴：http://jsfiddle.net/uW9nG/

在小提琴中，您会看到如果您将鼠标 A ，它会飞过蓝色容器。如果切换溢出，溢出将被隐藏。

如何使溢出只是调整组列表的大小以使其适合容器？

（我整个上午一直在研究这个数学，但是不太明白......）

Answer 1

我把你的小提琴分开，想出了一个solution。只需找到容器和弹出窗口的顶部位置，然后找到差异并将弹出窗口与该值相对定位。我还必须将列表项的高度更改为20px的硬编码，否则列表项将改变宽度。

var groupListTop = groupList.offset().top;
var containerTop = $('#container').offset().top;
if(groupListTop < containerTop) {
    var diff = containerTop - groupListTop;
    groupList.css({
        position: 'relative',
        top: diff
    })
}

Answer 2

您的groupList目前正在获得margin-top，但更简单的方法是position:absolute然后将其拉出-50px（以匹配推送{{1}的50px 1}}向下。See fiddle.

<ul id='test-two'>

如果您的groupList.css({ 'top': '-50px', 'position': 'absolute' }); 未定位，则可以为#test-two提供groupList 0px。