JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="container">
  
<div class="nav">

<a href="#">Click Me</a><div class="drop">Hello World!</div>

<a href="#">Click Me 2</a><div class="drop">Hello World 2!</div>

<a href="#">Click Me 3</a><div class="drop">Hello World 3!</div>

</div>
  

  
  
</div>

CSS

.container {max-width:700px;margin:auto;}

.nav {width:100%;position:relative;}

.nav a {line-height:40px;display:inline-block;padding:0 20px;background-color:#999;color:#fff;text-decoration:none;}

.nav a:hover {background-color:#dedede;}

.nav a:hover {background-color:#dedede;}

.nav a:hover + div {display:block;}

.drop {width:100%;display:none;position:absolute;background-color:#dedede;padding:20px;}

.drop:hover {display:block;}

.drop:hover  .nav a {background-color:#dedede;}