title: CSS not working on menu for responsive design
body: <p>I have made a pretty rough menu for responsive web, everything seems working fine. But when I open on devices like iPad and phones, I found a little bug which I am unable to solve. I did used jQuery for that. What I am trying to do is when the menu is opened in devices, it should get close soon after the option is clicked. But I not able to achieve this. Unless until I re-click the menu option, my menu doesn't close.</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;header clearfix&quot;&gt;
          &lt;div class=&quot;nav&quot;&gt;
              &lt;input type=&quot;checkbox&quot; id=&quot;toggle&quot; /&gt;
              &lt;label for=&quot;toggle&quot; class=&quot;toggle&quot; onclick&gt;&lt;/label&gt;
              &lt;ul class=&quot;menu&quot;&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Google&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Facebook&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Youtube&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Twitter&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Facebook&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Youtube&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Twitter&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- End of Navigation --&gt;
      &lt;/div&gt;
      &lt;!-- End of Header --&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>html, body {
      height: 100%;
      background: #F2F2F2;
  }
  body, a {
      font: normal 16px Helvetica, Verdana, Geneva, sans-serif;
      color: #3F3F3F;
  }
  .container {
      min-height: 100%;
      height: auto !important;
      height: 100%;
      margin: 0 auto -30px;
  }
  .container:after {
      content:'';
      display: block;
      height: 30px;
      clear: both;
  }
  body {
      -webkit-animation: bugfix infinite 1s;
  }
  @-webkit-keyframes bugfix {
      from {
          padding:0;
      }
      to {
          padding:0;
      }
  }
  .header {
      position: relative;
  }
  #toggle, .toggle {
      display: none;
  }
  .menu &gt; li {
      list-style: none;
      float:left;
  }
  .clearfix:before, .clearfix:after {
      display: table;
      content:&quot;&quot;;
  }
  .clearfix:after {
      clear: both;
  }
  @media only screen and (max-width: 768px) {
      .menu {
          display: none;
          opacity: 0;
          width: 100%;
          position: absolute;
          right: 0;
      }
      .menu &gt; li {
          display: block;
          width: 100%;
          margin: 0;
      }
      .menu &gt; li &gt; a {
          display: block;
          width: 100%;
          text-decoration: none;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
      }
      .toggle {
          display: block;
          position: relative;
          cursor: pointer;
          -webkit-touch-callout: none;
          -webkit-user-select: none;
          user-select: none;
      }
      #toggle:checked ~ .menu {
          display: block;
          opacity: 1;
      }
  }
  /*--------------------------------
   Presentation Styles (Editable)
  ---------------------------------*/
   .header {
      min-height: 100px;
      height: 100%;
      padding: 0 20px;
      background: #FFFFFF;
  }
  .header &gt; h1 {
      float: left;
      padding: 30px 0 0;
      font-style: italic;
      font-family: Georgia;
      font-size: 28px;
      color: #DFDFDF;
  }
  .nav {
      display: block;
      float: right;
  }
  .nav, .menu, .menu &gt; li, .menu &gt; li &gt; a {
      height: 100%;
  }
  .menu &gt; li &gt; a {
      display: block;
      padding: 42px 20px;
      text-decoration: none;
      font-weight: normal;
      font-size: 16px;
      line-height: 1;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transition: all 0.25s linear;
      -moz-transition: all 0.25s linear;
      -o-transition: all 0.25s linear;
      transition: all 0.25s linear;
  }
  .menu &gt; li &gt; a:hover, .menu &gt; li &gt; a:focus {
      background: #F2F2F2;
      box-shadow: inset 0px 5px #51C1F1;
      color: #51C1F1;
      padding: 50px 20px 34px;
  }
  .toggle {
      z-index: 2;
  }
  @media only screen and (max-width: 768px) {
      .menu {
          background: #FFFFFF;
          border-top: 1px solid #51C1F1;
      }
      .menu, .menu &gt; li, .menu &gt; li &gt; a {
          height: auto;
      }
      .menu &gt; li &gt; a {
          padding: 15px 15px;
      }
      .menu &gt; li &gt; a:hover, .menu &gt; li &gt; a:focus {
          background: #F2F2F2;
          box-shadow: inset 5px 0px #51C1F1;
          padding: 15px 15px 15px 25px;
      }
      .toggle:after {
          content:'Main Menu';
          display: block;
          width: 200px;
          margin: 33px 0;
          padding: 10px 50px;
          background: #51C1F1;
          -webkit-border-radius: 2px;
          border-radius: 2px;
          text-align: center;
          font-size: 12px;
          color: #FFFFFF;
          -webkit-transition: all 0.5s linear;
          -moz-transition: all 0.5s linear;
          -o-transition: all 0.5s linear;
          transition: all 0.5s linear;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
      }
      .toggle:hover:after {
          background: #45ABD6;
      }
      #toggle:checked + .toggle:after {
          content:'Close Menu';
      }
  }
  @media only screen and (max-width: 479px) {
      .header &gt; h1 {
          text-align: center;
      }
      .header &gt; h1, .nav, .toggle:after {
          float: none;
      }
      .toggle:after {
          text-align: center;
          width: 100%;
      }
  }
  </code></pre>
  <p>You can check it by resizing your browser also..</p>
  <p>here is the <a href="http://jsfiddle.net/H8VCb/1/" rel="nofollow noreferrer">FIDDLE</a></p>
  <p>Please help me, jQuery will also work for the same</p>