JSFiddle - React, Tailwind, and code Playground

by Soundar Pandian

HTML

<div class="element a">
        <span>Dropdown1</span>
        <ul class="popup">
            <li>Link 01</li>
            <li>Link 02</li>
            <li>Link 03</li>
            <li>Link 04</li>
            <li>Link 05</li>
            <li>Link 06</li>
            <li>Link 07</li>
            <li>Link 08</li>
            <li>Link 09</li>
            <li>Link 10</li>
        </ul>
    </div>

    <div class="element b">
        <span>Dropdown2</span>
        <ul class="popup">
            <li>Link 01</li>
            <li>Link 02</li>
            <li>Link 03</li>
            <li>Link 04</li>
            <li>Link 05</li>
            <li>Link 06</li>
            <li>Link 07</li>
            <li>Link 08</li>
            <li>Link 09</li>
            <li>Link 10</li>
        </ul>
    </div>

CSS

*
        {
            border: 0;
            margin: 0;
            padding: 0;
        }

        div
        {
            background-color: #09C;
            width: 200px;
            line-height: 40px;
            top: 200px;
            left: 300px;
            display: block;
            position: relative;
            text-indent: 15px;
            cursor: pointer;
        }

            div span
            {
                font-weight: bold;
                font-family: sans-serif;
                font-size: 16px;
                color: #FFF;
            }

            div ul
            {
                background-color: #0f0;
                width: 200px;
                height: 300px;
                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;
                }

        .element.a
        {
            left: 20px;
            top: 20px;
        }
        .element.b
        {
            left: 300px;
            bottom: -300px;
            top: auto;
        }

JavaScript

$(".element").bind("mouseenter mouseleave", function (e) {
    var element = $(e.currentTarget), 
    popup = element.children("ul");
    
    if(e.type == "mouseenter") {
        var top = calculateTop(element, popup);
        popup.css("top", top + "px").css("display", "block");
    }
    else {
        popup.css("display", "none");
    }
});

function calculateTop(element, popup) {
    var height = element.outerHeight(), 
    popupHeight = popup.height(),
    pos = element.offset(),
    top = pos.top, bottom = $(window).height() - (top + height);

    if (bottom > popupHeight || top < popupHeight)
        return height;
    else
        return -popupHeight;
}