JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">     
        <ul class="panel">        
            <li class="hover"><a href="#">Link 1</a>            
                <ul class="countries">
                    <li><a href="#">Country 1</a></li>
                    <li><a href="#">Country 2</a></li>
                    <li><a href="#">Country 3</a></li>
                    <li><a href="#">Country 4</a></li>
                </ul>            
            </li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>        
        </ul>
    </div>

CSS

#container{
            padding: 20px;
        }
   
        ul{
            list-style: none;
            margin-left: 0;
        }
        
        .panel{
            margin-top: 100px;
        }
        
        .panel li{
            float: left;
            margin-right: 10px;
        }
        
        .panel li.hover{
            position: relative;
        }
        
        .countries{
            background: #dedede;
            padding: 20px;
            position: absolute;
            bottom: 15px;
            width: 200px;
            border-bottom: 10px solid #fff;
            display: none;
        }
        
        .countries li{
            float: none;
            margin-right: 0;
        }

JavaScript

$(document).ready(function(){
            $('#container li.hover').hover(function(){
                $(this).find('ul.countries').fadeToggle(200);
            });
            
            $('ul.countries a').click(function(){
                $('this').find('ul.countries').fadeOut(200);
            });    
        });