css：检查目标子元素

Question

我开始使用：checked伪类来实现一个小的响应式菜单。到目前为止它工作正常。我现在想要实现的是菜单符号的“动画”。

在我的CSS中，我可以使用此

来定位实际的#navigation

input.menu[type=checkbox]:checked ~#navigation{display:block;}

并以此方式切换菜单。我也可以定位标签本身。

我现在要实现的目标是标记中的三个div元素。但我不能做那个工作。是否有可能，如果可以，怎么样？我尝试过各种各样的变体，比如

input.menu[type=checkbox]:checked +label+.div1{<do stuff>} 

等，但它不起作用。

这是html的片段：

<input class="menu" type="checkbox" id="show-menu" role="button">
<label for="show-menu" class="show-menu">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
 </label>
 <ul class="menu" id="navigation">
  ...
 </ul>

哦，我只想坚持使用CSS，如果不可能，JS是最后的选择。