JSFiddle - React, Tailwind, and code Playground

HTML

<!-- nav e lista para os botões e menu dropdown dos itens -->
<input type="checkbox" id="bt_menu">
<label for="bt_menu">&#9776;</label>
<nav class="classes">
  <ul>
    <li>
      <!-- Sessão dos Móveis -->
      <button>Móveis</button>
      <ul>
        <li>
          <button class="sessoes" onclick="armarios()">Armarios</button>
        </li>
      </ul>
    </li>
    <li>
      <!-- Sessão das Roupas -->
      <button>Roupas</button>
      <ul>
        <li>
          <button class="sessoes" onclick="bones()">Bonés</button>
        </li>
      </ul>
    </li>
  </ul>
</nav>
<!-- Input para menu responsivo -->

CSS

.classes {
  width: 100%;
  height: 70px;
  background-color: #FFFFFF;
}

.classes ul {
  position: relative;
  list-style: none;
}

.classes ul li {
  width: 150px;
  height: 100px;
  float: left;
}

.classes button {
  display: block;
  padding: 15px;
  border: none;
  text-align: center;
  background: #303336;
  color: #FFFFFF;
}

.classes ul ul {
  position: absolute;
  visibility: hidden;
}

.classes ul li:hover ul {
  visibility: visible;
}

.classes button:hover {
  background: #F4F4F4;
  color: #555;
}

.classes ul ul li {
  float: none;
  border-bottom: solid 1px #ccc;
}

.classes ul ul li button {
  background: #069;
}

label[for="bt_menu"] {
  padding: 5px;
  background-color: red;
  color: #fff;
  text-align: center;
  font-size: 30px;
  cursor: pointer;
  display: none;
  width: 50px;
  height: 45px;
}

#bt_menu {
  display: none;
}

@media(max-width: 800px) {
  label[for="bt_menu"] {
    display: block;
  }
  #bt_menu:checked~.classes {
    margin-left: 10px;
  }
  .classes {
    margin-left: -100%;
    transition: all .4s;
  }
  .classes ul li {
    float: left;
  }
  .classes ul ul {
    position: static;
    overflow: hidden;
    max-height: 0;
    transition: all .4s;
    padding-left: 0;
  }
  .classes ul li:hover ul {
    height: auto;
    max-height: 700px;
  }
}