JSFiddle - React, Tailwind, and code Playground

HTML

<label for="menu" class="menu">Show Menu</label>
<input type="checkbox" id="menu" role="button"></input>
<nav id='navigation'>
  <ul class="nav">
    <li><a href='#'>Products</a>
      <ul class="subnav">
        <li><a href='#'>Book Returns & Trolleys</a> 
        </li>
        <li><a href='#'>Furniture</a>
        </li>
        <li><a href='#'>Kingfisher Display</a> 
        </li>
        <li><a href='#'>Kinfisher Kidz</a>
        </li>
        <li><a href='#'>Library Shelving </a>
        </li>
        <li><a href='#'>Seating</a>
        </li>
        <li><a href='#'>Whiteboards & Noticeboards</a>
        </li>
      </ul>
    </li>
    <li><a href='#'>Projects</a>
    </li>
    <li><a href='#'>Contact</a>
    </li>
    <li><a href='#'>About</a>
    </li>
    <li><a href='#'>Specials</a>
    </li>
  </ul>
</nav>

CSS

a{
    color: #FFF;
}

#navigation ul.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 50%;
  height: 1000px;
  display: none;
}
#navigation ul.nav li {
  width: 300px;
  display: block;
  background-color: blue;
}

#navigation ul.nav li ul.subnav{
    display: none;
    margin: 0;
    padding: 0;
}

#navigation ul.nav li ul.subnav li {
  background-color: purple;
  width: 300px;
  height: 40px;
  display: block;
  clear: both;
  margin-top: 2px;
  padding-bottom: 2px;
}
#navigation ul.nav li:hover ul.subnav {
  display: block;
}
.menu {
  width: 300px;
  background: blue;
  color: white;
  height: 30px;
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox]:checked ~ #navigation ul.nav {
  display: block;
}