lucyb lucyb - 4 months ago 12
HTML Question

HTML Nested List

Hello I am trying to do a nested list in html and I can't figure out why my in3 is not showing up under my out3 (like inner 1 and 2).
I feel like this is one of those problems where I have to move a couple of letters around but ive been trying to fix this for an hour and cant seem to figure it out.

Heres the code that I have:


<ul>
<li>Out1
<li>Out2</li>
<ul>
<li>In1
<li>In2</li>
<ul>
<li>De1</li>
<li>De2</li>
</ul>
</li>
</ul>
</li>
<li>Out3</li>
<u1>
<li>In3</li>
</u1>
</u1>

Answer

It looks like your problem is improper nesting. If you want to put a list in a list, it needs to be nested within a nested list item (i.e. ul > li > ul), you should not have an unorder list directly in the root of another unordered list (i.e. ul > ul). This is also true for ordered lists (ol), and the mixture of ordered and unordered lists (e.g. ol>ul, ul>ol, ol>ul>ul>ol>ul, etc.) For more information on nesting, see the Stack Overflow question “Proper way to make HTML nested list?”.

Your code should look more like this:

<ul>
    <li>Out1</li>
    <li>Out2
        <ul>
            <li>In1</li>
            <li>In2
                <ul>
                    <li>De1</li>
                    <li>De2</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Out3
        <ul>
            <li>In3</li>
        </ul>
    </li>
</ul>

Additionally, your code displayed fine in my browser (Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36), but it was malformed.