title: Hovering over navigation bar
body: <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>