父div之外的CSS选择器

所以我有一些HTML，其中我在屏幕外隐藏了导航栏，直到顶部的复选框为：通过单击标签（hamburger png）进行检查，这时它会再次出现在屏幕上，直到出现hamburger icon再次单击，导航菜单再次在屏幕外隐藏。

现在，如果我将nav部分粘贴在标题中，则可以使用选择器（+和〜）来定位它……但是当它是一个新的div而不是紧挨着它时，我想不出一种方法复选框，并且位于父级之外的自己的div中。他们唯一的共同父母就是#wrapper，不是吗？但我不知道如何从另一个div内定位该目标。

有没有一种方法可以在纯CSS中对此进行定位，以使其在：checked复选框时弹出导航菜单，而在未选中该复选框时又返回导航菜单？我已经有了它的JavaScript，但是我也希望在CSS中使用它，以防万一，您知道...用户禁用了JavaScript。

的HTML

<div id="wrapper">
  <header>
    <a href="#" id="logo">TitleBar</a>
    <label for="hamburger" id="nav_open_icon"><img src="http://i.imgur.com/vv4Rdc9.png" alt="open-menu"></label>
    <label for="hamburger" id="nav_close_icon"><img src="/img/hamburger/close.png" alt="close-menu"></label>
    <input type="checkbox" id="hamburger">
    <div id="overlay"></div>
  </header>

  <nav>
    <ul>
      <li id="#"><a href="#">Home</a><img src="/img/home.png" alt="Home"></li>
      <li id="#"><a href="#">Stuff</a><img src="/img/about.png" alt="About"></li>
    </ul>
  </nav>
</div>

的CSS

    body{
       color: white;
       background-color: black;
       font-family: "PT Sans", "sans-serif";
       font-size: 1rem;
    }

    #container{
       margin: 0 auto;
       min-width: 320px;
       max-width: 1600px;
    }

    h1,h2,h3,h4,h5,h6{
       color:#FEBC11;
       text-align: center;
    }

    header{
       padding: 1rem 0rem 1rem 0rem;
       background-color: #333;
    }

    #logo{
       color:#FEBC11;
       font-size: 1rem;
       text-decoration: none;
       margin-left: .5rem;
       font-weight: bold;
    }

    #nav_open_icon{
       position: absolute;
       top: 1rem;
       right: 0;
       margin-right: 1rem;
       width: 30px;
       height: 23px;
    }

    #nav_close_icon{
       display: none;
       position: absolute;
       right: 0;
       top: 0.6rem;
       width: 30px;
       height: 30px;
       margin-right: 1rem;
    }

    #hamburger{
       /*display: none;*/
    }

    #overlay{

    }

    nav{
       position: absolute;
       left: -50%;
       background-color:rgba(124,115,115,.2);
       width: 10rem;
    }

    .nav_toggle{  
       position: absolute;
       left: 0%;
       background-color:rgba(51,51,51,1); 
      }

   #hamburger:checked nav + nav_toggle{

 }

    nav ul{
       list-style-type: none;
       margin: 0;
       padding: 0;  
    }

    nav li{
       padding: 1.1rem;   
    }

    nav a{
       color: white;
       text-decoration: none;
       margin-left: 1rem;  
    }

    nav img{
       float: left;
       margin: -.5rem 0rem 0rem -.2rem;
       height: 35px;
       width: 35px;
    }

https://jsfiddle.net/zaL594s8/