javascript - css レスポンシブ ドロップダウン メニュー - 画面の端を決定する ( div )

Question

応答性の高いドロップダウン メニューがあります。

サブメニューのオーバーフローを修正したい。画面の端を特定したいのですが、サブメニューが端からはみ出している場合は、その位置合わせを反対側に変更します。

問題：

サブメニューにカーソルを合わせると、エッジにぶつかってオーバーフローします。

質問：

画面の端 (div) を決定し、サブメニューの配置を反対側に変更する方法は? (サブメニューがオーバーフローするのを防ぎます)

JSFIDDLE:

JsFiddle の例

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