Olá, preciso de ajuda, pois fiz a lista do menu Categorias conforme a instrutora exemplificou, porém o menu não abre. Tentei várias formas, mas não encontrei o que fiz de errado. Segue os códigos para melhor vislumbre:
Imdex:
<ul class="opcoes">
<input type="checkbox" id="opcoes_menu" class="opcoes_botão">
<label for="opcoes_menu">
<li class="opcoes_item">Categorias</li>
</label>
<ul class="lista-menu">
<li class="lista-menu_item">
<a href="#" class="lista-menu_link">Programação</a>
</li>
<li class="lista-menu_item">
<a href="#" class="lista-menu_link">Front-end</a>
</li>
<li class="lista-menu_item">
<a href="#" class="lista-menu_link">Infraestrutura</a>
</li>
<li class="lista-menu_item">
<a href="#" class="lista-menu_link">Business</a>
</li>
<li class="lista-menu_item">
<a href="#" class="lista-menu_link">Design & UX</a>
</li>
</ul>
<li class="opcoes_item"><a href="#" class="opcoes_link">Favoritos</a></li>
<li class="opcoes_item"><a href="#" class="opcoes_link">Minha Estante</a></li>
</ul>
CSS:
@media screen and (min-width: 1024px) {
.cabecalho {
justify-content: space-between;
position: static;
}
.container_titulo,
.container_titulo-negrito {
font-family: var(--fonte-secundaria);
font-size: 30px;
}
.container_titulo {
font-weight: 400;
display: block;
}
.container_titulo-negrito {
font-weight: 700;
}
.opcoes {
display: flex;
}
.opcoes_item {
padding: 0 1em;
text-transform: uppercase;
}
.opcoes_link {
text-decoration: none;
color: var(--preto);
}
.container_imagem-transparente {
display: none;
}
.cabecalho_menu-hamburguer {
display: none;
}
.opcoes_botão:checked ~ .lista-menu {
display: block;
}
}
Se alguém conseguir me ajudar, fico grato desde já.