JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="mylinksdd">
    <li>
        <span>Quick Links</span>
        <ul>
            <li><a href="">One</a></li>
            <li><a href="">Two</a></li>
            <li><a href="">Three</a></li>
        </ul>
    </li>
</ul>

CSS

*                           {margin:0; padding:0; list-style:none;}

/* mylinksdd */
#mylinksdd                  {z-index:100; position:absolute;}
#mylinksdd li               {float:left; display:inline; position:relative;}
#mylinksdd li span          {font-weight:bold; cursor:pointer;}   
#mylinksdd li ul            {background:#eee; border:1px solid black; border-top:6px solid #3c1e4c; position:absolute; top:16px; padding:5px; color:#1a508e; display:none;}
#mylinksdd li ul li         {display:block; float:none; width:75px;}
#mylinksdd li ul li a       {color:#1a508e; display:block;}

JavaScript

$(document).ready(function() {
    $('#mylinksdd span').click(function(){
        $(this).next('ul').fadeIn();

        $(this).next('ul').mouseleave(function(){
            $(this).fadeOut();
        });
    });
});