JSFiddle - React, Tailwind, and code Playground

by Paulpro

HTML

<div id="dropdownContainer">
    <div id="showDropdown">Button</div>

    <div id="dropdown">
        <ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
            <li><a href="http://google.com">Google</a></li>
        </ul>
    </div>
</div>

CSS

#dropdownContainer{
    float: right;
    width: 100px;
    text-align: center;  
    margin-top: 25px;  
}

#showDropdown{
    background-color: #8AF;
    cursor: pointer;
}

#dropdown{
    display: none;
    background-color: #EEF;  
    border: 1px solid #000;
    width: 98px;
}

JavaScript

document.getElementById('showDropdown').onclick = showDropDown;

function showDropDown(e){
     document.getElementById('showDropdown').onclick = function(){};
     if(e.stopPropagation)
         e.stopPropagation();   // W3C model
     else
         e.cancelBubble = true; // IE model

     document.getElementById("dropdown").style.display = "block";
     document.onclick = function(e){
         var ele = document.elementFromPoint(e.clientX, e.clientY);
         if(ele == document.getElementById("showDropdown")){
             hideDropDown();
             return;
         }
         do{
             if(ele == document.getElementById("dropdown"))
                 return;
         }while(ele = ele.parentNode);
         hideDropDown();
     };
}

function hideDropDown(){
    document.onclick = function(){};
    document.getElementById("dropdown").style.display = "none";
    document.getElementById('showDropdown').onclick = showDropDown;
}