Почему селектор CSS (~) не работает с: флажок?

Question

Не могу получить: проверено на работу с ~

#menu {
  background-color: red;
}

#trigger:checked ~ #menu {
  background-color: green;
}

<input type="checkbox" id="trigger" />
<div id="menu">
  <h1>Hello</h1>
</div>

Вот CodePen этой проблемы: https://codepen.io/anon/pen/jowQWJ

Может кто-нибудь объяснить, почему он не работает?

Должно быть, я упускаю что-то очень очевидное, потому что мне это кажется довольно простым ...