title: Mobile nav not clickable
body: <p>I'm trying to make a responsive website with a dropdown mobile navbar, the menu opens but when you try to click it it closes immediately.</p>
  
  <p>I also noticed that when viewed on the android version of chrome, there's a gap between the navbar and the actual menu.</p>
  
  <p>I can't wrap my head around it and have no idea to fix it.</p>
  
  <p>My JSFiddle: <a href="https://jsfiddle.net/91t2hp3p/1/" rel="nofollow noreferrer">https://jsfiddle.net/91t2hp3p/1/</a></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;div class="nav animated slideInDown"&gt;
         &lt;img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-256.png" alt="" class="hamburger"&gt;
         &lt;ul id="menu"&gt;
             &lt;li&gt;&lt;a href="#home"&gt;HOME&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#aboutme"&gt;ABOUT ME&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#portfolio"&gt;PORTFOLIO&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="#contact"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
  
  .nav {
      width: 100%;
      height: 10%;
      line-height: 10vh;
      background-color: #F2F2F2;
      border-bottom: 1px solid #E4E4E4;
      text-align: center;
      position: fixed;
      z-index: 999;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  }
  
  .nav .hamburger {
      display: none;
  }
  
  .nav .logo h1 {
      color: #000;
      font-size: 32px;
  }
  
  .nav ul {
      height: 100%;
      text-align: center;
  
  }
  
  .nav ul li {
      display: inline-block;
      list-style: none;
      padding: 0 20px 0 20px;
      vertical-align: top;
      position: relative;
  }
  
  .nav ul a {
      color: #000;
      text-decoration: none;
  }
  
  .nav a:hover {
      color: #999;
  }
  
  @media only screen and (max-width: 850px){
      .up {
          margin-right: 8px;
      }
  
      .nav .hamburger {
          height: 6vh;
          width: 6vh;
          display: inline-block;
          float: left;
          margin: 2vh 0 0 2vh;
      }
  
      .nav ul {
          visibility: hidden;
          float: none;
          padding-top: 10vh;
          display: block;
      }
  
      .nav .hamburger:hover ~ ul {
          visibility: visible;
          width: 100%;
          margin: 0;
      }
  
      .nav ul li {
          display: block;
          background-color: #F2F2F2;
      }
  }
  </code></pre>
  
  <p>Thanks for reading :)</p>