title: Empty UL inside LI element
body: <p>Can anyone explain me why <code>&lt;ul&gt;</code> elementa cannot be empty?</p>
  
  <p>And why this HTML:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="header"&gt;
          &lt;a href="#"&gt;Work&lt;/a&gt;
          &lt;ul/&gt;
      &lt;/li&gt;
      &lt;li class="header"&gt;
          &lt;a href="#"&gt;New&lt;/a&gt;
          &lt;ul/&gt;
      &lt;/li&gt;
      &lt;li class="header"&gt;
          &lt;a href="#"&gt;Ungrouped&lt;/a&gt;
          &lt;ul/&gt;
      &lt;/li&gt;
      &lt;li class="header"&gt;
          &lt;a href="#"&gt;Offline&lt;/a&gt;
          &lt;ul/&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>is rendered like this:</p>
  
  <blockquote>
    <ul>
    <li>Work
    
    <ul>
    <li>New
    
    <ul>
    <li>Ungrouped
    
    <ul>
    <li>Offline</li>
    </ul></li>
    </ul></li>
    </ul></li>
    </ul>
  </blockquote>