JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<div class="navWrap">
<div class="class1">
  <a href="#">text</a>
  <div class="class2">text1</div>
</div>
<div class="class1">
  <a href="#">text</a>
  <div class="class2">text2</div>
</div>
<div class="class1">
  <a href="#">text</a>
  <div class="class2">text3</div>
</div>
</div">

CSS

.navWrap {margin:50px;}
.class1 {float:left; position:relative; display:block; padding:0px 10px; margin:0px 10px;}
.class2 {float:left; position:absolute; left:0px; display:none; width:200px; background:red;}

JavaScript

//set child relative to parent

jQuery('.class1 a').hover( function() {
    //Get
    var p = $(".navWrap");
    var offset = p.offset();
    
  if ($(this).parent().children('.class2').is(":hidden")) {
    $(this).parent().children('.class2').slideDown("slow");
  } else {
    $(this).parent().children('.class2').slideUp();
  }
   //set
   $(".class2").offset({ top: offset.top + 40, left: offset.left});
});

    //Get
    var p = $(".#topNav");
    var offset = p.offset();
   //set
   $j("#topNav td ul.dropdown").offset({ top: offset.top + 40, left: offset.left});