JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="jsddm">
    
    <li><a href="#" class="current" title="Who We Are">Who We Are</a>
        <ul style="visibility: hidden;">
        <li><a href="About-cFIRST-Corp.aspx" title="About us">About us</a></li>
            <li><a href="#" title="Our Credentials">Our Credentials</a></li>
            <li><a href="#" title="Our Parent Group">Our Parent Group</a></li>
            <li><a href="Contact-Us.aspx" title="Contact Us">Contact Us</a></li>
            
        </ul>
    </li>
    <li><a href="#" title="What We Do">What We Offer</a>
        <ul style="visibility: hidden;">
        <li><a href="#" title="Instant Searches">Instant Searches</a></li>
            <li><a href="#" title="Criminal Background Searches">Criminal Background Searches</a></li>
            <li><a href="#" title="Verification Services">Verification Services</a></li>
           <li><a href="#" title="Drug Screening">Drug Screening</a></li>
            <li><a href="#" title="Other Services">Other Services</a></li>
             <li><a href="#" title="Service Packages">Service Packages</a></li>
           
        </ul>
    </li>
   
    <li><a href="#" title="Our Enagagement Process">Our Enagagement Process</a>
    <ul style="visibility: hidden;">
        <li><a href="#" title="Sign Enagagement Letter">Sign Enagagement Letter</a></li>
            <li><a href="#" title="Access our online portal">Access our online portal </a></li>
            <li><a href="#" title="Talent Deployment &amp; Outsourcing">Candidate Authorization Form</a></li>
           <li><a href="#" title="Order Background Checks">Order Background Checks</a></li>
            <li><a href="#" title="cFIRST verifies information">cFIRST verifies information</a></li>
            <li><a href="#" title="Access your reports">Access your reports</a></li>
           
        </ul>
    
    
    </li>
   
</ul>

CSS

#jsddm {
    width:90%;
    margin: 0 auto;
    padding: 0;
}
#jsddm li {
    float: left;
    font-family: arial;
    font-size: 14px;
    list-style: none outside none;
    text-align: center;
}
#jsddm li a {
    color: #000000;
    display: block;
    font-family: Arial;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    margin: 0 1px 0 0;
    text-align: center;
    text-decoration: none;
    width: 200px;
}
#jsddm li a:hover {
    background-image: url("../images/btn_bg_a.gif");
    background-position: center center;
    background-repeat: repeat-x;
    color: #3639C4;
    text-shadow: none;
}
.current {
    background-image: url("../images/btn_bg_a.gif");
    background-position: center center;
    background-repeat: repeat-x;
    color: #FFFFFF;
    text-shadow: none;
}
#jsddm li ul {
    padding: 0;
    position: relative;
    left:-7%;
    visibility: hidden;
    -webkit-border-radius: 10px;
    border-radius: 10px; 
    -webkit-box-shadow: 0px 2px 5px -1px #A9A9A9;
    box-shadow: 0px 2px 5px -1px #A9A9A9; 
    background-color: #C3351D;
    overflow: hidden;
}
#jsddm li ul li {
    display: inline;
    float: none;
}
#jsddm li ul li a {
    color: #FFFFFF;
    font-size: 12px;
    height: 15px;
    line-height: 15px;
    margin-bottom: 0;
    margin-right: 0;
    margin-top: 0;
    padding: 8px;
    text-align: center;
    font-weight:bold;
    text-shadow: 0 0 0;
    width: 215px;
    text-shadow: 1px 1px 2px #333333;
    filter: dropshadow(color=#333333, offx=1, offy=1);
}
#jsddm li ul li a:hover {
    background: none repeat scroll 0 0 #9E2F1D;
    color: #FFFFFF;
    text-shadow: 1px 1px 2px #333333;
    filter: dropshadow(color=#333333, offx=1, offy=1);
}

#jsddm li:hover a{
    background-image: url("http://event.webstrikers.com/images/arrow.gif");
    background-repeat: no-repeat;
    background-position: bottom center;
}
#jsddm li:hover li a{background-image:none}

JavaScript

var timeout    = 0;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('#jsddm > li').bind('mouseover', jsddm_open)
   $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;