css响应下拉菜单 - 确定屏幕边缘（div）

Question

我有响应式下拉菜单。

我想修复子菜单的溢出。我想确定屏幕边缘，如果子菜单边缘溢出，则将其对齐方式改为另一边。

问题：

当我将鼠标悬停在子菜单上时，它们会碰到边缘并溢出。

问题：

如何确定屏幕边缘（div）并将子菜单对齐更改为另一侧？ （防止子菜单溢出屏幕）

的jsfiddle：

JsFiddle example

CSS：

.edge {
    position: absolute;
    top: 0;
    left: 0;
}

JS：

 $(".menu li").on('mouseenter mouseleave', function (e) {

    var elm = $('ul:first', this);
    var off = elm .offset();
    var l = off.left;
    var w = elm.width();
    var docH = $(".container").height();
    var docW = $(".container").width();

    var isEntirelyVisible = (l+ w <= docW);

    if ( ! isEntirelyVisible ) {
        $(this).addClass('edge');
    } else {
        $(this).removeClass('edge');
    }
});