title: Why does this HTML not have a closing <li> tag?
body: <p>I have been working on a dropdown menu that now works.  Just one strange thing is happening that I can't explain/don't understand. Here is a relevant piece of the code:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;p&gt;Music Theory 1&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/p&gt;&lt;/li&gt;
    &lt;li&gt;&lt;p&gt;&amp;lt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/p&gt;&lt;a href="#" id="lesson"&gt;Music Alphabet&lt;/a&gt;
       &lt;ul&gt;
          &lt;li&gt;&lt;a id="l0" class="lesnitem" href="#"&gt;Piano Keyboard&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="l1" class="lesnitem" href="#"&gt;Note Types&lt;/a&gt;&lt;/li&gt;
      ...
  </code></pre>
  
  <p>Notice the absence of the closing "li" tag on the second "li"
  If I put it in, the behavior changes drastically. the inner "ul" is no longer hidden and it is laid out differently (across instead of down),  so the absence is affecting the CSS, but I don't see it.</p>
  
  <p>I guess I'm Ok with leaving it out, but it grates on me.
  Could this have something to do with the inner "a" tag?</p>
  
  <p>Can anyone help me understand this?</p>