JSFiddle - React, Tailwind, and code Playground

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...

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

$(function () {

    $(".dropdown li").on('mouseenter mouseleave', function (e) {
        if ($('ul', this).length) {
            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');
            }
        }
    });
});