title: Foundation 6 dropdown menu, can't click on submenus on mobile devices
body: <p>Hello fellow developers.. I have a problem with the foundation dropdown menu, and after quite a while of tackling the problem I search for your help, foundation gurus.</p>
  
  <p>I am using foundation 6.2.4-full. I've created a dropdown menu but I noticed an issue, the problem lies when using the menu with mobile devices (try on iphone 4). It's submenu items aren't clickable. For example, click on the Map option, and then try to click on Pokemons sub-option. The code is embedded below. 
  I can't find the problem, I am quite new to foundation, perhaps I'm missing an important option? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="device-width=width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="/css/foundation/foundation.min.css"&gt;
      &lt;script src="/js/jquery_2.2.4.min.js"&gt;&lt;/script&gt;
      &lt;script src="/js/foundation/what-input.js"&gt;&lt;/script&gt;
      &lt;script src="/js/foundation/foundation.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script&gt;
      $(document).ready(function() {
          $(document).foundation();
      });
  &lt;/script&gt;
  &lt;nav class="top-bar"&gt;
      &lt;ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu&gt;
          &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="has-submenu"&gt;
              &lt;a href="/"&gt;Map&lt;/a&gt;
              &lt;ul class="menu submenu vertical nested" data-submenu&gt;
                  &lt;li&gt;&lt;a href=""&gt;Pokemons&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Poke Gyms&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Poke Stops&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;news&lt;/a&gt;&lt;/li&gt;
          &lt;li class="has-submenu"&gt;
              &lt;a&gt;Guides&lt;/a&gt;
              &lt;ul class="menu submenu vertical nested" data-submenu&gt;
                  &lt;li&gt;
                      &lt;a href=""&gt;Game guides&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href=""&gt;Site guides&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>