JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="jsddm">
    <li> <a href="#">JavaScript</a>
        <ul>
            <li><a href="#">           Adults</a></li>
            <li><a href="#">            top</a></li>
            <li><a href="#">            hoodie</a></li>
        </ul>
    
       <ul style="position:block">
            <li><a href="#">Kids</a></li>
            <li><a href="#">Toy</a></li>
            <li><a href="#">Boot</a></li>
        </ul>
    </li>
</ul>

CSS

#jsddm {
    margin: 100px 0;
    padding: 0;
}
 
#jsddm li {
    float: left;
    list-style: none;
    font: 12px Tahoma, Arial;
    }
 
#jsddm li a {
    display: block;
    background: #20548E;
    padding: 5px 12px;
    text-decoration: none;
    border-right: 1px solid white;
    width: 70px;
    color: #EAFFED;
    white-space: nowrap;
}
 
#jsddm li a:hover {
    background: #1A4473;
}
 
#jsddm li ul {
   float: left;
    margin: 0;
    padding: 0;
    position: absolute;
    display: none;
    border-top: 1px solid white;
    margin-left: 50px;
    
}

#jsddm li ul {
   float: left;
    margin: 0;
    padding: 0;
    position: absolute;
    display: none;
    border-top: 1px solid white;
    margin-left: 50px;
    
}
 
#jsddm li ul li {
    float: none;
    display: inline;
}
 
#jsddm li ul li a {
    width: auto;
    background: #9F1B1B;
}
#jsddm li ul li a:hover {
    background: #7F1616;
}

.site-nav--dropdown {
  display: block;
  float: left;
  /*margin:0 50px;*/
  position: relative;
  /*top: 100%;*/
  left: 0;
  text-align: left;
  border: 1px solid $colorBorder;
  background-color: $colorBody;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  z-index: 15;
  font-size: 14;
}

JavaScript

$("#jsddm li").click(function() {
    var b = $("ul", this);
    var p = b.position();
    b.css('top', $(this).position().top-b.height()-2);
    b.show();    
});
$("#jsddm li ul").mouseleave(function(){
    $(this).hide();    
});