The logic is to make the menu appear when it is as a checked checkbox and it is on a screen of maximum width 800px but for some reason it does not work ...
.classes {
margin-top: 80px;
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"] {
margin-top: -150px;
padding: 5px;
background-color: red;
color: #fff;
text-align: center;
font-size: 30px;
cursor: pointer;
display: none;
width: 50px;
height: 45px;
}
#bt_menu {}
@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 {
width: 100%;
float: none;
}
.classes ul ul {
position: static;
overflow: hidden;
max-height: 0;
transition: all .4s;
}
.classes ul li:hover ul {
height: auto;
max-height: 700px;
}
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- nav e lista para os botões e menu dropdown dos itens -->
<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 -->
<input type="checkbox" id="bt_menu">
<label for="bt_menu">☰</label>
</body>
</html>