JSFiddle - React, Tailwind, and code Playground

by Ralph Echter

HTML

<nav>
  <a href="#" id="dropped">The Drop<br />
  <div id="exemplar">
    Swiggity swooty, comin' for dat booty.<br />
    <!--<a href="#">Unique</a>
    <a href="#">Clean</a>
    This breaks it, removed for now
    -->
  </div>
  </a>
</nav>

CSS

nav {
  position: relative;
  width: 400px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

nav a#dropped {
  display: inline-block;
  padding: 10px;
  color: #DDD;
  text-decoration: none;
  position: relative;
  font-family: "Arial";
  outline: 1px solid red;
}

nav div {
  position: absolute;
  top: 115%;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  background-color: rgba(0, 0, 0, 0.5);  
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s;
}

nav a:hover div {
  visibility: visible;
  opacity: 1;
}