当父菜单中的大型列表项出现时，如何解决侧边栏子菜单项溢出的问题

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 {}
});

我的问题的屏幕截图 。

Working Codepen Link