title: Can't make CSS dropdown menu show up below its parent?
body: <p>I have a menu like this</p>
  
  <pre><code>&lt;nav id="nav"&gt;
   &lt;ul&gt;
    &lt;li&gt;Home&lt;/li&gt;
    &lt;li&gt;Menu1
     &lt;ul&gt;
      &lt;li&gt;Sub1&lt;/li&gt;
      &lt;li&gt;Sub2&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Menu2
     &lt;ul&gt;
      &lt;li&gt;Sub1&lt;/li&gt;
      &lt;li&gt;Sub2&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/li&gt;
   &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>My CSS file is like this</p>
  
  <pre><code>#nav ul li {
      display: inline;
  }
  #nav ul ul {
      display: none;  
  }
  #nav ul li:hover &gt; ul {
      display: block;
      position: absolute;
  }
  #nav ul ul li {
      display: block; 
  }
  </code></pre>
  
  <p>The sub-menu items drop down and look just fine, it's just that they're dropping down under the first list item, Home.</p>
  
  <p>How can I get them to drop down under the parent list item they're under?</p>