title: Nested CSS dropdown menu
body: <p>So I've been trying to get this dropdown menu to work properly for past few hours and I'm having no luck.</p>
  
  <p>The HTML is:</p>
  
  <pre><code>&lt;nav&gt;
   &lt;ul id="#sideNavArchive"&gt;
    &lt;li&gt;&lt;a&gt;Year&lt;/a&gt;&lt;/li&gt;
     &lt;ul&gt;
      &lt;li&gt;&lt;a&gt;Month&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;Month&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
    &lt;li&gt;&lt;a&gt;Year&lt;/a&gt;&lt;/li&gt;
     &lt;ul&gt;
      &lt;li&gt;&lt;a&gt;Month&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a&gt;Month&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt; 
    &lt;/ul&gt;
   &lt;/nav&gt;
  </code></pre>
  
  <p>Now, all I'm looking to do is hover of Year and for the months to drop down, but I seem to be running into trouble with the CSS selectors.</p>
  
  <p>The CSS I have at the moment:</p>
  
  <pre><code>ul#sideNavArchive &gt; li{background-color:red; display:block;}
  ul#sideNavArchive &gt; ul &gt; li{display:none;}
  ul#sideNavArchive &gt; li:hover ul &gt; li{display:block;}
  </code></pre>
  
  <p>There's obviously something with that bottom piece of css which is causing the issue, if someone could point it out to me that'd be great :)</p>