JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myDiv"></div>

CSS

@charset "utf-8";
/* CSS Document */

#popitmenu {
    position: absolute;
    background-color: #58595b;
    border:1px solid black;
    font: normal 12px Verdana;
    line-height: 18px;
    z-index: 100;
    visibility: hidden;
    padding:5px;
}
#popitmenu a {
    text-decoration: none;
    padding-left: 6px;
    color: white;
    font:bold 11px Arial, Helvetica, sans-serif;
    display: block;
    padding:9px 9px 9px 9px;
    line-height:10px;
    text-align:left;
    
}
#popitmenu a:hover { 
    background:url(../bg_popmenulinkhover.gif) repeat-x bottom left;
    line-height:10px;
    color:#000;
}
.active {
    padding:5px;
    display:block;
    color:#aecad1;
    margin-bottom:3px;
    list-style:none;
    font:bold 11px Arial, Helvetica, sans-serif;
    list-style-image:none;
    position:relative;
    height:20px;
    color:#000;
}
.active a {
    border:0;
    margin:0;
    padding:0;
    display:inline;
}

li span {
    float:right;
    width:100px;
    margin-top:-20px;
    text-align:right;
    margin-right:5px;
}
/*.content {
    background:#fff;
    border:1px solid #ccc;
    width:86%;
    margin:auto;
}
 li.active {
    background:#9cd0df;
    color:#000;
}
*/


/* Popup dropdown menu style */

.jqpopupmenu, .jqpopupmenu ul { /*topmost and sub ULs, respectively*/
    font: bold 11px arial;
    margin: 0;
    padding:5px;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    background-color: #58595b;
    border:1px solid black;
    font: font 12px Arial;
    line-height: 18px;
    
    visibility: hidden;
    display: none; /*collapse all sub menus to begin with*/
    box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
    -webkit-box-shadow: 3px 3px 8px #818181;
    -moz-box-shadow: 3px 3px 8px #818181;
}
.jqpopupmenu li {
    position: relative;
}
.jqpopupmenu li a {
    display: block;
    width: 160px; /*width of menu (not including side paddings)*/
    color: #fff;
    background: #58595b;
   ...

JavaScript

/* Flex Level Popup Menu v1.0
* Created: Dec 27th, 2009 by DynamicDrive.com. This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//Version 1.1 (March 5th, 2010): Each flex menu (UL) can now be associated with a link dynamically, and/or defined using JavaScript instead of as markup.

//Usage: $(elementselector).addpopupmenu('menuid')
//ie:
//jQuery(document).ready(function($){
    //$('a.mylinks').addpopupmenu('popupmenu1') //apply popup menu with ID "popmenu1" to links with class="mylinks"
//})

/*jQuery.noConflict()*/

var jquerypopupmenu={
    arrowpath: 'arrow.gif', //full URL or path to arrow image
    popupmenuoffsets: [0, 0], //additional x and y offset from mouse cursor for popup menus
    animspeed: 200, //reveal animation speed (in milliseconds)
    showhidedelay: [150, 150], //delay before menu appears and disappears when mouse rolls over it, in milliseconds

    //***** NO NEED TO EDIT BEYOND HERE
    startzindex:9999,
    builtpopupmenuids: [], //ids of popup menus already built (to prevent repeated building of same popup menu)

    positionul:function($, $ul, e){
        var istoplevel=$ul.hasClass('jqpopupmenu') //Bool indicating whether $ul is top level popup menu DIV
        var docrightedge=$(document).scrollLeft()+$(window).width()-40 //40 is to account for shadows in FF
        var docbottomedge=$(document).scrollTop()+$(window).height()-40
        if (istoplevel){ //if main popup menu DIV
            var x=e.pageX+this.popupmenuoffsets[0] //x pos of main popup menu UL
            var y=e.pageY+this.popupmenuoffsets[1]
            x=(x+$ul.data('dimensions').w > docrightedge)? docrightedge-$ul.data('dimensions').w : x //if not enough horizontal room to the ridge of the cursor
            y=(y+$ul.data('dimensions').h > docbottomedge)? docbottomedge-$ul.data('dimensions').h : y
        }
        else{ //if sub level popup menu UL
           ...