title: Super quick CSS nested list won't hide
body: <p>I cannot figure out for the life of me why the nested lists aren't hiding. I copied a stylesheet I did at uni (that worked fine) nearly to the dot. But everything I try I can hide the second tier!</p>
  
  <p>It's probably super simple, but I'm having that blank you get when you start for too long.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*Main Nav*/
  #nav {
   height: 45px;
   width: 960px;
  }
  #nav li {
   text-align: center;
   display: inline-block;
   background-color:white;
   width: 188px;
   height: 35px;
   padding-top: 10px;
  }
  #nav li:hover {
   background-color: white;
  }
  #nav ul {
   list-style: none;
  }
  #nav a {
   text-decoration: none;
   color: black;
   }
  #nav a:hover {
   color: white; 
  }
  /*Sub Nav*/
  #nav li ul {
   display: none;
  }
  #nav li:hover ul {
   display: block;
   position: aboslute;
  }
  #nav li li {
   display: block;
   background-color: gray;
  }
  #nav li li:hover {
   background-color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="nav"&gt;
   &lt;ul&gt;
       &lt;li&gt;&lt;a href="#1"&gt;News&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#1"&gt;Music&lt;/a&gt;&lt;/li&gt;
           &lt;ul&gt;
               &lt;li&gt;&lt;a href="#2"&gt;Artists&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#2"&gt;Free Tracks&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#2"&gt;Labels&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#2"&gt;Genres&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;li&gt;&lt;a href="#1"&gt;School&lt;/a&gt;&lt;/li&gt;
              &lt;ul&gt;
               &lt;li&gt;&lt;a href="#2"&gt;Interviews&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#2"&gt;Tips N Tricks&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#2"&gt;Genre Class&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#2"&gt;Promoters&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;li&gt;&lt;a href="#1"&gt;Events&lt;/a&gt;&lt;/li&gt;
           &lt;ul&gt;
               &lt;li&gt;&lt;a href="#2"&gt;Coming Up&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#2"&gt;Clubs&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#2"&gt;Festivals&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;li&gt;&lt;a href="#2"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;ul&gt;
               &lt;li&gt;&lt;a href="#2"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#2"&gt;Upload Mix&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#2"&gt;Shop&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
      &lt;/ul&gt;
  &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks in advance, it's driving me crazy.</p>