HTML Nested List

Question

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>

You have a few `u1`s which should be `ul`s and `
In3
` would be invalid anyway, because you can basically only have `
one of those "couple of hours after the work day has ended" kinda problems. :) — Toby, Jul 21 '16 at 00:17

score 1 · Answer 1 · answered Jul 21 '16 at 00:16

1

it's because half-way through you switch to <u1>, instead if the correct <ul>.

answered Jul 21 '16 at 00:16

Toby

12,743
8
43
75

score 0 · Answer 2 · answered Jul 21 '16 at 00:16

0

Nested <ul> should be inside the parent <li>

answered Jul 21 '16 at 00:16

Wim Mertens

1,780
3
20
31

score 0 · Accepted Answer · edited May 23 '17 at 12:14

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.

HTML Nested List

3 Answers3