JSFiddle - React, Tailwind, and code Playground

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 {
  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 {
  display: none;
  position: absolute;
  
  
  transition: all .5s ease-in-out;
  opacity: 0;
  /* This doesn't work either */
}

nav a:hover div {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5);
  width: 200px;
  
  
  opacity: 1;
  /* :( */
}