IF menu on edge of screen drop other way

by Plippie Plop

HTML

<div class="container">

<ul class="dropdown">
    <li><a href="#">Link 1</a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
        </ul>
    </li>
    <li><a href="#">Link 2</a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
        </ul>
    </li>
    <li><a href="#">Link 3</a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
        </ul>
    </li>
    <li><a href="#">Link 4</a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
        </ul>
    </li>
    <li><a href="#">Link 5</a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
        </ul>
    </li>
    <li><a href="#">Link 6</a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
        </ul>
    </li>
    <li><a href="#">Link 7</a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
  ...

CSS

body {background:red;}

.container {
 margin:30px;
 background:#fff;  
 padding-bottom:400px;
}

.dropdown,
.dropdown li,
.dropdown ul {
    list-style:none;
    margin:0;
    padding:0;
}

.dropdown {
    position:relative;
    z-index:10000;
    float:left;
    width:100%;
}
.dropdown ul {
    position:absolute;
    top:100%;
    visibility:hidden;
    display:none;
    z-index:900;
    width:16em;
    
}
.dropdown ul ul {
    top:0;
}


.dropdown li {
    position:relative;
    float:left;
}
.dropdown li:hover{
    z-index:910;
}

.dropdown ul:hover,
.dropdown li:hover > ul,
.dropdown a:hover + ul,
.dropdown a:focus + ul {
    visibility:visible;
    display:block;
}
.dropdown a {
    display:block;
    background:#000;
    color:#fff;
    padding:1em 2em;
}
.dropdown ul li {
    width:100%;
}

.dropdown li:hover a {
    background:#333;
}

.dropdown li a:focus,
.dropdown li a:hover {
    background:#666;
}


.dropdown .edge ul {
    right:0;
}

JavaScript

$(".dropdown 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');
        }
    });