UnOverflowing Automatic Dropdown

that's it

HTML

<div  class="dropdown">
    <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>
            <li><a href="#">Link 6</a>

            </li>
            <li><a href="#">Link 7</a>

            </li>
            <li><a href="#">Link 8</a>

            </li>
       </ul>
       
</div>

CSS

* {
    box-sizing: border-box;
}
body {
    background:dodgerBlue;
}
.dropdown, .dropdown li, .dropdown ul {
    list-style:none;
    margin:0;
    padding:0;
}
.dropdown {
    width:100%;
}
.dropdown ul {
    position:absolute;
    top:100%;
    left: 100%;
    visibility:hidden;
    display:none;
    z-index:1;
    width:200px;
    max-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
}
.dropdown li {
    position:relative;
    float: left;
    clear: both;
}
.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:5px 20px;
    text-decoration: none;
}
.dropdown ul li {
    width:100%;
}
.dropdown li:hover a {
    background:#333;
}
.dropdown li a:focus, .dropdown li a:hover {
    background:#666;
}

JavaScript

$(".dropdown").on('click', function (e) {
    var submenu = $('ul:first', this);
    var submenuTop = submenu.offset().top;
    var submenuHeight = submenu.height();
    var viewportHeight = $(window).height();

    var isOverflowing = (submenuTop + submenuHeight > viewportHeight);

    if (isOverflowing) {
        submenu.css("top", $(this).height() - submenuHeight);
    } else {
        submenu.css("top", 0);
    }
});