title: Second level of drop-down menu will not appear on hover
body: <p><a href="http://jsfiddle.net/s5G6N/3/" rel="nofollow">JSFIDDLE</a></p>
  
  <p>I have a multi-level drop-down menu that has all its secondary (and higher) levels' heights set to zero, with <code>overflow:hidden</code>, as you can see here: </p>
  
  <pre class="lang-css prettyprint-override"><code>/*second level*/
  #navbar li ul{
      list-style: none;
      position: absolute; 
      top: 100%;    
      height:0px;
      overflow:hidden;
      -o-transition: all .3s ease-in;
      -webkit-transition: all .3s ease-in;
      -moz-transition: all .3s ease-in;
      transition: all .3s ease-in;
  }
  /*third level*/
  #navbar li ul li ul{
      position: absolute; 
      left: 102%;
      top:0;
      height:0px; 
      overflow:hidden; 
  }
  </code></pre>
  
  <p>On both of these elements' designated hovers, i have their heights set to 250px.As you can see here: </p>
  
  <pre class="lang-css prettyprint-override"><code>#navbar li:hover &gt; ul{
      height: 250px; 
  }
  
  #navbar li ul li:hover &gt; ul{
      height: 250px; 
  }
  </code></pre>
  
  <p>The second level appears just fine. The third level however does not appear at all. Does anyone know why? </p>
  
  <p>update: the third level <code>li</code> elements don't seem to be picking up anything bad from the parent elements, at least from what I'm seeing. </p>