JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dropdown"> <span>Dropdown</span>

    <ul>
        <li>Link 01</li>
        <li>Link 02</li>
        <li>Link 03</li>
        <li>Link 04</li>
        <li>Link 05</li>
        <li>Link 06</li>
    </ul>
</div>

CSS

* {
    border: 0;
    margin: 0;
    padding: 0;
}
div {
    background-color: #09C;
    line-height: 40px;
    top: 40px;
    width: 200px;
    left: 300px;
    display: block;
    position: absolute;
    text-indent: 15px;
    cursor: pointer;
}
div span {
    font-weight: bold;
    font-family: sans-serif;
    font-size: 16px;
    color: #FFF;
}
div:hover ul {
    display: block;
}
div ul {
    background-color: #0f0;
    width: 200px;
    position: absolute;
    display: none;
    list-style: none;
}
div ul li {
    background-color: #000;
    width: 200px;
    line-height: 30px;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 16px;
    color: #FFF;
}

JavaScript

$(document).ready(function () {
    var ul_h = $('ul').height();
    var dd_h = $('#dropdown').height();
    var doc_h = $(document).height();
    var offsetTop = $('#dropdown').offset().top;
    if (doc_h - offsetTop - dd_h < ul_h) {
        $('#dropdown ul').css('bottom', '100%');
    }
});