JSFiddle - React, Tailwind, and code Playground

HTML

<span class="menu">menu
</span>

<nav  class="main_menu">
    <ul>
      <li><a href="#">text-1</a></li>
      <li><a href="#">text-2</a></li>
      <li><a href="#">text-3</a></li>
    </ul>
  </nav>

CSS

.main_menu{
  display:none;
}
.main_menu ul{
  margin:0;
  padding:0;
}

.menu:hover~.main_menu, .main_menu:hover{
  display:block;
}