JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
  <ul>
    <li>
      <a href="#">1</a>
    </li>
    <li>
      <input type="radio" name="menu" id="m2" class="trigger">
      <label for="m2">2</label>
      <div class="submenu">
        <a href="#">2</a>
        <ul>
          <li>
            <a href="#">21</a>
          </li>
          <li>
            <a href="#">22</a>
          </li>
        </ul>
      </div>
    </li>
    <li>
      <input type="radio" name="menu" id="m3" class="trigger">
      <label for="m3">3</label>
      <div class="submenu">
        <a href="#">3</a>
        <ul>
          <li>
            <input type="radio" name="menu3" id="m31" class="trigger">
            <label for="m31">31</label>
            <div class="submenu">
              <a href="#">31</a>
              <ul>
                <li>
                  <a href="#">311</a>
                </li>
                <li>
                  <a href="#">312</a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#">32</a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</div>

CSS

.trigger{
  position:absolute;
  margin:0;
  padding:0;
  border:0;
  width:0;
  height:0;
  opacity:0;
}

.menu a{
  display:inline-block;
}
.menu .submenu{
  display:none;
}
.menu ul{
  list-style-type:none;
  padding:0;
}


.menu .trigger:checked~label{
  display:none;
}
.menu .trigger:checked~.submenu{
  display:block;
}

.menu li:hover>.trigger~label{
  display:none;
}
.menu li:hover>.trigger~.submenu{
  display:block;
}