não entendi essa classe

Olá Thiago,

Essa classe é usada para selecionar elementos que estão imediatamente após um elemento específico, no caso, o elemento que possui a classe "conteiner__botao" e que está selecionado (checked). O símbolo "~" é o seletor de irmão geral e seleciona todos os irmãos que vêm após o elemento anterior.

O código CSS dentro das chaves indica que, quando o elemento "conteiner__botao" estiver selecionado, a classe ".lista-menu" terá sua propriedade "display" alterada para "block", ou seja, será exibida na página.

Espero ter ajudado e bons estudos!

correto mas porque quando clicamos na imagem a lista aparece e também desaparece oque faz isso acontecer ?

É o display: block;. No CSS, no caso a instrutora definiu como padrão o display: none; na lista-menu para não aparcer, e depois atribuiu o display: block; para voltar a aparecer , ou seja, quando o checkbox for selecionado, por isso utiliza o checked, veja:

Padrão display: none; não aparece o conteúdo:

.lista-menu{
    display: none;
}

Padrão display: block; faz aparecer quando checkbox é clicada e marcada:

.container__botao:checked~.lista-menu{
    display: block;
}