How to properly embed unordered lists within ordered lists (HTML)

Question

So, I have an ordered list that has an unordered list within it, like so:

    <ol>
        <li>Choose which type of game you want to play</li>
        <li>Press the spacebar to start the game</li>
        <li>
            <ul>
                <li>Controls for single player mode:</li>
                <li>
                    <ul>
                        <li>W and S</li>
                        <li>&uarr; and &darr;</li>
                        <li>A and Z</li>
                        <li>' (apostrophe) and / (forward slash)</li>
                    </ul>
                </li>
                <li>Controls for double player mode:</li>
                <li>
                    <ul>
                        <li>The right player uses A and Z</li>
                        <li>The left player uses ' and /</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ol>

Unfortunately, it outputs this:

I embedded the additional lis as otherwise it failed W3C validation. The Validator complained about sticking <ul> elements inside of <ol> elements otherwise.

How do I fix this so that the list symbols in front of the items will go away?

Answer 1

Just don't create a new li to embed your nested uls, but add them to the existing li. Like this:

<ol>
    <li>Choose which type of game you want to play</li>
    <li>Press the spacebar to start the game
        <ul>
            <li>Controls for single player mode:
                <ul>
                    <li>W and S</li>
                    <li>&uarr; and &darr;</li>
                    <li>A and Z</li>
                    <li>' (apostrophe) and / (forward slash)</li>
                </ul>
            </li>
            <li>Controls for double player mode:
                <ul>
                    <li>The right player uses A and Z</li>
                    <li>The left player uses ' and /</li>
                </ul>
            </li>
        </ul>
    </li>
</ol>

Since ordered and unordered lists are block-level elements in HTML, they will wrap to the next line by default, so there's even no need to create additional divs or insert line breaks.