javascript - 如何修复父菜单中的大型列表项时侧边栏子菜单项溢出

Question

我有一个侧边菜单栏，它在悬停时显示子菜单，它是子项。子菜单可能有多个子项，它们在页脚 div 下方溢出。正如您在附加照片中看到的那样，子菜单中的最后一个子菜单位于页脚下方并且没有很好地显示

$('.page-sidebar-menu').children('li').hover(function() {
    var posTop = $(this).position().top;
    var liHeight = winHeight - posTop;
    liHeight = $(this).children('ul.sub-menu').offset().top + $(this).children('ul.sub-menu').height();
    console.log("liHeight: " + liHeight + "<br> WinTotHeight : " +  WinTotHeight);

    if (liHeight > WinTotHeight) {
        if ($(this).children('.sub-menu').children().length > 7) {
            $(this).children('ul.sub-menu').attr("style", "top: auto;bottom: -221%;position: absolute;height: 50vh;overflow-y: auto;");
            if($(this).children('ul.sub-menu').siblings().length == 1) {
                var dHtml = "<div class='cloneEle'> <i class=" + $(this).children(':eq(0)').find('i').attr('class') +" style='padding-left:5px;padding-right: 18px;'></i>" + $(this).children(':eq(0)').find('span.title').text() + "</div>";   
                $(dHtml).insertBefore($(this).children('ul.sub-menu'));
                $('.cloneEle').attr('style', 'z-index: 9999999;background: #d54635;padding: 10px;top: auto;bottom: 562%;position: absolute;left: 46px;width: 22.7vw;color: #fff;display:block;');
            } else {}
        }
    } else {}
});

我的问题的屏幕截图 。

工作 Codepen 链接

标签： javascriptjqueryhtmlcss