title: Css nav submenu mobile don't work
body: <p>I'm building a nav menu with sub-menus with just CSS (media queries too) and html.</p>
  
  <p>It works fine visualy, but the problem is:
  On the mobile browser, When I click in any sub-menu, it won't work, sometimes it just redirect to the first menu address and sometimes it don't even redirect. On the computer browser it works fine too.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>#nav{
      position: relative;
      height: 100%;
  }
  
  #nav ul{
      margin: 0px;
      padding: 0px;
      height: 100%;
  }
  
  
  #nav ul li{
      list-style: none;
      float: left;
      height: 100%;
      border-right: black solid 2px;
      text-align: center;
      padding: 0px 15px 0px 15px;
  }
  
  #nav ul li:hover{
      background: #47350e;
  }
  
  #nav ul li a{
      position: relative;
      font-family: 'Oswald';
      font-size: 18px;
      color: white;
      text-transform: uppercase;
      text-decoration: none;
      top: 15px;
  }
  
  #nav ul li a:hover{
  
  }
  
  #nav ul li .children li{
      border: 0px;
  }
  
  #nav ul li .children li a{
      font-size: 13px;
      top: 5px;
      font-weight: normal;
  }
  
  
  #nav ul li .children li a:hover{
      text-decoration: underline;
  }
  
  #nav ul li .children{
      display: none;
      position: absolute;
      left: 0px;
      top: 46px;
      height: 30px;
      width: 100%;
      background: #47350e;
      padding-left: 120px;
      z-index: 5;
  }
  
  #nav ul li:hover .children{
      display: block;
  }
  </code></pre>
  
  <p>and HTML</p>
  
  <pre><code>&lt;div id="nav"&gt;
              &lt;ul id="nav-items"&gt;
  
                  &lt;li&gt;
                      &lt;a href=#&gt;option 1&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href=#&gt;option 2&lt;/a&gt;
                      &lt;ul class="children"&gt;
                          &lt;li&gt;
                              &lt;a href=#&gt;option 3&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href=#&gt;option 4&lt;/a&gt;
                          &lt;/li&gt;
  
                      &lt;/ul&gt;
                  &lt;/li&gt;
  
              &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>