title: displaying sub-menu's on hover problems
body: <p>I have 2 separate menu's. I want to display the links within menu #2 when hovering over certain buttons on Menu #1. I want to try and do this with CSS if possible. Some of the css I am using is below.</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="http://www.xecforce.com"&gt;HOME&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;NEWS&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;FORUMS&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;GAMES&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;XECOM&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;div id="sub-menu-items"&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Test 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Test 2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>#sub-menu-items ul li {
  list-style-type: none;
  z-index: 99999;
  margin-right: 15px;
  padding-bottom: 8px;
  padding-top: 8px;
  display: none;
  text-shadow: 2px 3px 3px #080808; 
  }
  
  nav ul li:first-child:hover #sub-menu-items ul li {
  display: inline;
  }
  </code></pre>
  
  <p>how is this not working?</p>