CSS菜单Subnav显示低于折叠

Question

我有一个左侧垂直CSS菜单，其子弹出右侧。

我的问题是，最后一个菜单项有许多子窗口，导致它们显示在窗口的折叠下方。

有没有办法用CSS或jQuery来检测是否会发生这种情况并相应调整位置，以便可以看到所有子菜单项？

这是我的示例的链接（您可能需要调整窗口高度）：

<!--demo is at following link-->

http://jsfiddle.net/otcq2ne0/

Answer 1

以下是使用jQuery的更新：http://jsfiddle.net/otcq2ne0/1/

$('body').on('mouseenter mouseover', '.vmdrop', function() {
    var subNav = $('.vmenu-dropdown', this);

    if (subNav.length) {
        var pos = subNav[0].getBoundingClientRect();
        if (pos.bottom > window.innerHeight) {
            var threshold = pos.top;
            var buffer = 10;
            var diff = window.innerHeight - (pos.bottom + buffer);

            if (Math.abs(diff) > threshold) {
                diff = '-' + (threshold + buffer);
            }

            if (Math.abs(diff) > 0) {
                subNav.css({ top: diff + 'px' });
            }
        }
    }
});