JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu-block">
  <div class="menu-block-inner">
    Menu (Hover me)
  </div>
  <div class="menu-expanded">
    <span><a href="#">Menu item1</a></span>
    <span><a href="#">Menu item2</a></span>
  </div>    	
</div>

CSS

.menu-block {
  display: inline-block;
}

.menu-block:hover .menu-block-inner{
    display: none;
}

.menu-block:hover .menu-expanded{
    display: inline-block;
}

.menu-expanded {
    display: none;
}