Lists within lists - What am I doing wrong?

This is a concept that throws everyone off, at first, until we get a closer look at it…

First, let’s discuss the unordered list, <ul></ul>, and the ordered list, <ol></ol>. Both of these elements do not take plain text or any element other than <li></li>. So,

<ul>Jobs</ul>
<!-- and -->
<ol>Businesses

are both invalid HTML. Consider this example:

<ul>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
</ul>

This will print a list on three lines that look something like this:

• Red
• Green
• Blue

and this,

<ol>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
</ol>

will print a numbered list, like so,

1. Red
2. Green
3. Blue

That’s the basic list. Now let’s look at nesting. List item elements, <li></li>, are block elements, and as such may contain other blocks, including UL and OL. The key is to ‘contain’ them in the parent LI.

<ul>
    <li>Jobs
        <ul>
            <li>Accountant</li>
            <li>Domestic Engineer</li>
            <li>Entrepreneur</li>
        </ul>
    </li>
    <li>Businesses
        <ol>
            <li>Blest Creations</li>
            <li>Blest Enterprise</li>
        </ol>
    </li>
</ul>

Study this example and you should be able to repair your markup so it works.

Hi, please help. If I make a -ol- inside the -ul- theres the message: “Oops, try again. Make sure you have at least one unordered list inside your unordered list of profile sections! “

OK, so I did that (-ul- inside -ul-) and the message now “Oops, try again. Make sure you have at least one ordered list inside your unordered list of profile sections! “ … !??? So how can I solve the problem?

It’s worse than any comments so far. The instructions ask for one thing but the auto-grader looks for something different. So even working code that follows the instructions doesn’t pass.

The instructions say: “Go nuts with your lists within lists! The only requirement is that you have at least one ordered list(

) and one unordered list (
).”

The error says: “Oops, try again. Make sure you have at least one unordered list inside your unordered list of profile sections!”

I hope someone from code academy is watching!

This worked for me, ugh!!

You have to have one ol with one ul inside it. The tricky part is, you have to have one ul with both and ol and an ul inside it.

Its asking for an unordered inside an unordered. I fell pray to the silly jump backwards in teaching also. I was working in ordered lists, then all of a sudden they ask for another unordered list again.

There is often rather verbose errors, you sometimes have to read them a few times to follow, they are poorly implemented.

So

<ul>
    <li>Outer Unordered
        <ul>
           <li>Inner Unordered</li>
        </ul>
    </li>
<li> 
    <ol>
       <li>Inner Ordered</li>
   </ol>
</li>
</ul>

Try to read the error warning carefully. This code should solve the problem:

     //creating unordered list - this will wrap all of sub-unordered list and sub-ordered list 
     <ul>
           //creating sub- unordered list
        <li>Item 1 
            <ul>
                <li>sub item 1.1</li>
                <li>sub item 1.2</li>
             </ul>
        </li>
           //creating sub-ordered list
        <li>Item 2
            <ol>
                <li>sub item 2.1</li>
            </ol>
        </li>
    </ul>