title: Responsive menu can't click on links after resize
body: <p>I am making responsive navigation menu using css only.</p>
  
  <p>I have toogle menu button to show menu after resizing screen.</p>
  
  <h2>Problem:</h2>
  
  <p>When I click on menu to scroll down and resize width of screen, (wider and back) menu is not clickable.</p>
  
  <h2>JSFIDDLE:</h2>
  
  <p><a href="http://jsfiddle.net/mikehudak/bU8RW/" rel="nofollow">http://jsfiddle.net/mikehudak/bU8RW/</a></p>
  
  <p>My goal is achieve this menu, but CSS ONLY !
  <a href="http://jsfiddle.net/cancerian73/AxWwG/" rel="nofollow">( js menu link)</a></p>
  
  <h2>CSS:</h2>
  
  <pre><code>/* TOGGLE */
  
  #slidebox {
      position: relative;
      padding: 0;
      margin: 0;
  }
  
  #toggle {
      display: none;
      text-align: left;
      height:30px;
      width: 14px;
      padding: 0 12px 0 12px;
      position:relative;
      z-index: 2;
      background: lightcoral;
  }
  
  @media screen and (max-width: 640px) { 
      #toggle {
          display: block !important;
      }
  }
  
  #toggle a { 
      position: absolute;
      text-decoration: none;
      line-height: 30px;
      font-size: 16px;
  }
  
  #box {
      padding: 0;
      margin: 0;
      display: block !important;
      position: absolute;
      top: calc(100%);
      right: calc(100%-30px);
      width: 100%;
  }
  
  @media screen and (max-width: 640px) { 
      #box {
          overflow: hidden;
          opacity: 0;
          position: absolute;
          top: calc(100%);
          right: calc(100%-30px);
          min-height: 100%;
          display: block !important;
      }
  }
  
  #slidebox:target #box {
      opacity:1;
      min-height: 100%;
      width: 100%;
  }
  
  #slidebox:target .top { 
      opacity:0;
      pointer-events: none;
  }
  </code></pre>