html - 纯CSS复选框切换菜单

Question

我正在尝试创建一个菜单，当复选框被选中/取消选中时，该菜单将进行切换。
我已经创建了以下html结构：

<header>
  <div>
    <label for="navmenu"><span class="icon-menu"></span></label>
    <input type="checkbox" id="navmenu">
    <nav>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </nav>
  </div>
</header>

<span>元素通过css包含图标字体中的图标。
这是我写的css：

header {
  position: fixed;
  width: 100%;
  text-align: center;
  font-size: 1.25em;
  letter-spacing: 1px;
  line-height: 2em;
  background: #299a97;
  color: white; }
header h1 {
  font-size: 1em;
  font-weight: normal; }
header div {
  width: 2em;
  position: fixed;
  top: 0;
  left: 0; }
header div input[type=checkbox] {
  position: absolute;
  top: 1em;
  left: 1em;
  opacity: 0; }

nav {
  width: 100%;
  position: fixed;
  top: 2.5em;
  display: none; }
nav li {
  height: 2em;
  line-height: 2em;
  padding: 0 1em;
  background: #2eaeab;
  border-bottom: 1px solid #299a97;
  color: white; }
nav li a {
  display: block;
  width: 100%;
  text-decoration: none;
  color: white; }
nav span {
  margin-right: 1em; }

页眉div输入[类型=复选框]：选中~导航{
显示：block；}
现在，由于某些原因，当我选中复选框时，导航菜单不会出现。我做错了什么？

Answer 1

四处移动nav和input[type=checkbox]:checked ~ nav。否则nav会用display: none覆盖之前的所有内容。
更新
只是为了详细说明。由于某些原因，当定位为绝对时，复选框不会取消选中。这无关紧要，因为您不需要查看复选框，这样我们就可以完全不显示它，让您的标签检查和取消选中我们隐藏的复选框。
有小提琴-Fiddle link!
用隐藏复选框更新
CSS

  input[type=checkbox] {
     display: none;
   }

 nav {
      position: fixed;
      display: none;
  }

  input[type=checkbox]:checked ~ nav {
      display: block;
  }