Foundation 6 responsive menu bug dropdown/drilldown
<p>So I want to have dropdown for medium and bigger devices and drilldown for small devices. However I don't think I did it right and I get some weird things.</p>

<ol>
<li><p>If I load the page an medium and bigger device there is I think 1px blue line on drilldown menu after using it.</p></li>
<li><p>If I load the page on small device it's broken.</p></li>
</ol>

<p>Here is a code pen: <a href="http://codepen.io/anon/pen/BzEjov" rel="nofollow">http://codepen.io/anon/pen/BzEjov</a></p>

<pre><code>&lt;body class="no-js"&gt;
  &lt;ul class="horizontal dropdown menu" data-responsive-menu="drilldown medium-dropdown" style="width: 300px;"&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;Item 1&lt;/a&gt;
      &lt;ul class="is-dropdown-submenu-parent menu"&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Item 1A&lt;/a&gt;
          &lt;ul class="is-dropdown-submenu-parent menu"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Item 1A&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Item 1B&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Item 1C&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Item 1D&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Item 1E&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 1B&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;Item 2&lt;/a&gt;
      &lt;ul class="is-dropdown-submenu-parent menu"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 2A&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 2B&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;Item 3&lt;/a&gt;
      &lt;ul class="is-dropdown-submenu-parent menu"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 3A&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Item 3B&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/body&gt;
</code></pre>

<p><strong>JavaScript/jQuery:</strong>   </p>

<pre><code>jQuery(document).ready(function() {
  jQuery(document).foundation();
});
</code></pre>

<p>and a little video showing the bugs:</p>

<p><a href="https://sendvid.com/oxg1jckq" rel="nofollow">https://sendvid.com/oxg1jckq</a></p>

<p>Look at item 1  there is a line there.
And the small screensize load is broken totaly.So how do I do dropdown for medium and drilldown for small-only? Any help?</p>