title: How to make this button, clickable in touch devices?
body: <p>I have a problem with menu button. I found this code in the net and the button is with label &amp; input. It is not clickable in touch devices like phones. How can I do this button clickable?</p>
  
  <p>Please help somebody</p>
  
  <p>Here is the link: <a href="http://jsfiddle.net/Ltspckd0/" rel="nofollow">http://jsfiddle.net/Ltspckd0/</a></p>
  
  <p><strong>HTML Code</strong></p>
  
  <pre><code>&lt;div id="adminmenu"&gt;
      &lt;label for="show-menu" class="show-menu"&gt;Menuja&lt;/label&gt;
      &lt;input type="checkbox" id="show-menu" role="button"&gt;
      &lt;ul id="menu"&gt;
          &lt;li&gt;&lt;a id="ahome" href="#"&gt;Kreu&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="apatients" href="#"&gt;Pacient&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="advisit"href="#"&gt;Vizita&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="areports"href="#"&gt;Raporte&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="aprofile"href="#"&gt;&lt;?php echo $username=user_name(); ?&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS Code</strong></p>
  
  <pre><code>ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
  }
  
  #adminmenu li {
      display: inline-block;
      float: left;
      width: 20%;
      border-right: 1px solid #F5F5F5;
  }
  
  li a {
      display: block;
      min-width: 140px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #fff;
      background: #2D6CA2;
      text-decoration: none;
  }
  
  li:hover a {
      background: #428BCA;
      color: #fff;
      text-decoration: none;
  }
  
  li:hover ul a {
      background: #f3f3f3;
      color: #2D6CA2;
      height: 40px;
      line-height: 40px;
  }
  
  li:hover ul a:hover {
      background: #428BCA;
      color: #fff;
  }
  
  li ul {
      display: none;
  }
  
  li ul li {
      display: block;
      float: none;
  }
  
  li ul li a {
      width: auto;
      min-width: 100px;
      padding: 0 20px;
  }
  
  ul li a:hover + .hidden, .hidden:hover {
      display: block;
  }
  
  .show-menu {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      text-decoration: none;
      color: #fff;
      background: #428BCA;
      text-align: center;
      padding: 10px 0;
      display: none;
  }
  
  input[type=checkbox] {
      display: none;
  }
  
  input[type=checkbox]:checked ~ #menu {
      display: block;
  }
  
  @media screen and (max-width : 760px) {
  
      ul {
          position: static;
          display: none;
      }
  
      li {
          margin-bottom: 1px;
      }
  
      #adminmenu ul li, li a {
          width: 100%;
      }
  
      .show-menu {
          display: block;
      }
  }
  </code></pre>