Olá, João. Tudo bem?

A ordem do exercício é a seguinte:

1. .lista-menu {
2. display: none; position: absolute; top: 100%; }
3. .container__botao
4. :checked ~ .lista-menu {
5. display: block; }

Essa ordem específica no código é necessária para criar o comportamento de aparecer e desaparecer do menu baseado no estado do checkbox. Vamos detalhar o porquê de cada parte:

• display: none;: Inicialmente, o menu precisa estar oculto. Isso é feito configurando o estilo padrão da classe .lista-menu para display: none;.
• position: absolute; top: 100%;: Esses estilos ajudam a posicionar o menu corretamente.

• Este seletor refere-se ao checkbox que controlará a visibilidade do menu. Ele é essencial porque será o elemento que dispara a alternância visual ao ser marcado (checked).

• Aqui acontece a mágica! O seletor CSS :checked detecta quando o checkbox (container__botao) está marcado.
• ~ .lista-menu: Este é um seletor de irmãos adjacentes, que encontra o próximo elemento .lista-menu que está no mesmo nível do checkbox.
• display: block;: Quando o checkbox está marcado, o menu (.lista-menu) é exibido, substituindo o display: none; por display: block;.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)