title: How to properly embed unordered lists within ordered lists (HTML)
body: <p>So, I have an ordered list that has an unordered list within it, like so:</p>
  
  <pre><code>    &lt;ol&gt;
          &lt;li&gt;Choose which type of game you want to play&lt;/li&gt;
          &lt;li&gt;Press the spacebar to start the game&lt;/li&gt;
          &lt;li&gt;
              &lt;ul&gt;
                  &lt;li&gt;Controls for single player mode:&lt;/li&gt;
                  &lt;li&gt;
                      &lt;ul&gt;
                          &lt;li&gt;W and S&lt;/li&gt;
                          &lt;li&gt;&amp;uarr; and &amp;darr;&lt;/li&gt;
                          &lt;li&gt;A and Z&lt;/li&gt;
                          &lt;li&gt;' (apostrophe) and / (forward slash)&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;Controls for double player mode:&lt;/li&gt;
                  &lt;li&gt;
                      &lt;ul&gt;
                          &lt;li&gt;The right player uses A and Z&lt;/li&gt;
                          &lt;li&gt;The left player uses ' and /&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ol&gt;
  </code></pre>
  
  <p>Unfortunately, it outputs this:</p>
  
  <p><a href="https://i.stack.imgur.com/Hhstm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hhstm.png" alt="enter image description here"></a>
  </p>
  
  <p>I embedded the additional <code>li</code>s as otherwise it failed W3C validation.  The Validator complained about sticking <code>&lt;ul&gt;</code> elements inside of <code>&lt;ol&gt;</code> elements otherwise.</p>
  
  <p><strong><em>How do I fix this so that the list symbols in front of the items will go away?</em></strong></p>