JSFiddle - React, Tailwind, and code Playground

HTML

<button>
  Hover me
</button><div class="row">
    <div id="nav">
        <div id="mm">
          <div class="float">
            AAA  
          </div>
          <div class="float">
            BBB  
          </div>
        </div>
    </div>
</div>
<hr>

<div id="hidden" class="tr hidden">
  Hidden block
</div>

<div id="hidden2" class="tr hidden">
  Hidden2 block
</div>

CSS

hr {margin: 2em 0;}
div {border: 1px solid;}
#hidden {transition: 1s;}
#hidden2 {transition: transform 1s;}

.hidden {
  opacity: 0;
}
button:hover ~ .hidden {
  transform: translate3D(1em, 2em,0);
  opacity: 1;
}
#nav {
    visibility: hidden;
    opacity: 0;
    height: 0;
    transform:translateY(-10px);
    transition: opacity .3s ease-out, transform .3s;
}

.float {float: left;}
#mm {
    position: absolute;
    width: 900px
}


.row:hover > #nav, button:hover ~ .row > #nav {
    visibility:visible;
    opacity:1;
    height:auto;
    transform:translateY(0)
}