title: How to make this CSS hamburger menu entirely clickable?
body: <p>I am working on a pure CSS hamburger menu icon, so far it's working great, except that the gaps between the lines are not clickable. How can I modify this code so that the entire button is clickable as opposed to just the lines?</p>
  
  <pre><code>&lt;a href="#" title="Open Menu" class="menu"&gt;&lt;/a&gt;
  
  .menu {
      width:30px;
      height:5px;
      background-color:#000;
      position:relative;
      display:inline-block;
  }
      .menu:after, .menu:before {
          content: '';
          width: 100%;
          height:5px;
          background-color:#000;
          position:absolute;
      }
      .menu:after {
          top:10px;
          left:0;
      }
      .menu:before {
          top:20px;
          left:0;
      }
  </code></pre>
  
  <p>Here's a <a href="http://jsfiddle.net/0bf4vxmt/" rel="nofollow">JSFiddle</a>.</p>
  
  <p>Thanks!</p>