Percebi que a instrutora usou no CSS o seletor .opcoes__botao:checked~ .lista-menu.
porem isso não 'linkou' o checkbox a categoria.
Assim ao aplicar o display: none, a guia sumiu.
Gostaria de primeiro entender o que faz esse " ~ " e uma possivel solução do meu problema.
CSS
@media screen and (min-width: 1024px){
.opcoes__botao:checked~ .lista-menu{
display: block;
width: auto;
}
.opcoes__botao{
display: none;
}
}
HTML
<ul class="opcoes">
<input type="checkbox" id="opcoes__menu" class="opcoes__botao">
<label for="opcoes__menu"></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">Categorias</li>
<li class="opcoes__item"><a href="#" class="opcoes__link"></a>Favoritos</li>
<li class="opcoes__item"><a href="#" class="opcoes__link"></a>Minha estande</li>
</ul>
<div class="container">
<a href="#"><img src="img/Favoritos.svg" alt="Meus Favoritos"class="container__imagem container__imagem-transparente"></a>
<a href="#"><img src="img/Compras.svg" alt="Meu carrinho de compras"class="container__imagem"></a>
<a href="#"><img src="img/Usuario.svg" alt="Meu Perfil"class="container__imagem"></a>
</div>
Obrigado.