quando clico em categorias o menu não aparece, já revisei o código mas não encontro nenhum erro nele visto que as mesmas propriedades funcionaram anteriormente
HTML:
<ul class="opçoes">
<input type="checkbox" id="opçoes__menu" class="opçoes__botao">
<label for="opçoes__menu">
<li class="opçoes__item">Categorias</li>
</label>
<li class="opçoes__item"><a href="#" class="opçoes__link">Favoritos</a></li>
<li class="opçoes__item"><a href="#" class="opçoes__link">Minha estante</a></li>
</ul>
<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>
CSS:
@media screen and (min-width: 1024px){
.container__titulo, .container__titulo--negrito {
font-family: var(--fonte-secundario);
font-size: 30px;
}
.container__titulo {
font-weight: 400;
display: block;
}
.container__titulo--negrito {
font-weight: 700;
}
.opçoes {
display: flex;
}
.opçoes__item {
padding: 0 1em;
text-transform: uppercase;
}
.opçoes__link {
text-decoration: none;
color: var(--preto);
}
.container__imagem--tranparente {
display: none;
}
.cabecalho__menuhamburger {
display: none;
}
.opçoes__botao:checked~.lista-menu {
display: block;
width: auto;
}
.opçoes__botao {
display: none;
}