JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul class=bar>
    <li>
      <input type=checkbox id=1><label for=1>about</label>
      <ul>
        <li>us
        <li>you
        <li>cheese
      </ul>
   </ul>
</nav>

CSS

.bar{
  list-style-type:none;
}
.bar ul{
  display:none;
}
.bar input[type=checkbox]{
  display:none;
}
label:hover{
    cursor:pointer;
}
input[type=checkbox]:checked + label{
  color:blue;
}
input[type=checkbox]:checked + label + ul{
  display:inline;
}