Hovering over navigation bar
<p>I have a navigation bar with a sub navigation, but whenever i hover over a certain part of the navigation, the sub menu opens in a very strange way. Here's my code:</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-css lang-css prettyprint-override"><code>#menu {
  background-color: rgba(0, 0, 0, 0.6);
  width: 715px;
  margin-left: 600px;
  font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
  border-radius: 4px;
}
#menu ul li {
  display: inline-block;
  padding: 15px;
  margin-left: 90px;
}
#menu ul li a {
  text-decoration: none;
  color: #FFF;
}
/* Sub-menu */

#menu ul ul {
  display: none;
}
#menu ul li:hover &gt; ul {
  display: block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav id="menu"&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Projecten&lt;i class="material-icons" style="font-size:15px"&gt;arrow_drop_down&lt;/i&gt;
     &lt;ul class="sub-menu"&gt;
      &lt;li&gt;&lt;a href="ru.html"&gt;Russisch&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/nav&gt;</code></pre>
</div>
</div>
</p>

<p>It should open underneath the "Projecten" tab, but is does this:
<a href="http://i.stack.imgur.com/I1yPV.png" rel="nofollow">problem</a></p>