Nested lists in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this nested list?

Look at the HTML code below. What will you see rendered in the browser?

HTML

<ul>
  <li>Fruit
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrot</li>
      <li>Broccoli</li>
    </ul>
  </li>
</ul>

A Only Fruit and Vegetables appear as bullets; Apple, Banana, Carrot, Broccoli do not appear.

B A bulleted list with Fruit, Apple, Banana, Vegetables, Carrot, Broccoli all at the same level with no indentation.

C A bulleted list with two main items: Fruit and Vegetables. Under Fruit, Apple and Banana appear as indented bullets. Under Vegetables, Carrot and Broccoli appear as indented bullets.

D A numbered list with Fruit and Vegetables as main items, and Apple, Banana, Carrot, Broccoli as sub-items with numbers.

💡 Hint

Nested

inside
• creates sub-bullets.

The outer

creates main bullets. Each
• can contain another
  for nested bullets. So Apple and Banana appear indented under Fruit, and Carrot and Broccoli under Vegetables.

❓ selector

intermediate

Which CSS selector targets only the nested list items?

Given this HTML structure with nested lists, which CSS selector will style only the inner list items (like Apple, Banana, Carrot, Broccoli)?

HTML

<ul>
  <li>Fruit
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrot</li>
      <li>Broccoli</li>
    </ul>
  </li>
</ul>

A ul li ul li

B ul > li

C li ul

D ul li

💡 Hint

Think about selecting list items inside another list inside list items.

The selector 'ul li ul li' means: inside a ul, find li, then inside that li find a ul, then inside that ul find li. This targets only nested list items, not the top-level ones.

🧠 Conceptual

advanced

Why use nested lists in HTML?

Which is the best reason to use nested lists in a webpage?

A To show a hierarchy or grouping of related items clearly.

B To make the page load faster by reducing HTML code.

C To replace paragraphs with bullet points for all text.

D To avoid using headings and paragraphs altogether.

💡 Hint

Think about how nested lists help organize information.

Nested lists help show relationships between items, like categories and subcategories, making content easier to understand.

❓ accessibility

advanced

How to improve accessibility of nested lists?

Which practice improves accessibility for nested lists in HTML?

A Replace nested lists with images to show hierarchy visually.

B Use semantic tags like <ul> and <li> and ensure proper nesting without skipping levels.

C Use only <div> tags with CSS for all lists to control style.

D Add multiple <br> tags between list items for spacing.

💡 Hint

Think about screen readers and semantic meaning.

Using proper semantic HTML with

and
• tags helps screen readers understand the list structure and hierarchy, improving accessibility.

❓ layout

expert

How to create a horizontal nested list menu with CSS?

You want a horizontal main menu with vertical dropdown submenus using nested lists. Which CSS snippet correctly achieves this layout?

HTML

<nav>
  <ul class="menu">
    <li>Home</li>
    <li>Services
      <ul class="submenu">
        <li>Design</li>
        <li>Development</li>
      </ul>
    </li>
    <li>Contact</li>
  </ul>
</nav>

A .menu li { float: left; } .submenu { float: right; }

B .menu { display: block; } .submenu { display: flex; flex-direction: row; }

C .menu { display: grid; grid-template-columns: 1fr 1fr 1fr; } .submenu { display: grid; grid-template-rows: 1fr 1fr; }

D .menu { display: flex; list-style: none; } .submenu { display: none; position: absolute; } .menu li:hover > .submenu { display: block; }

💡 Hint

Use flexbox for horizontal main menu and hide/show submenu on hover.

Setting .menu to flex makes main items horizontal. Hiding .submenu by default and showing it on hover creates dropdown effect. Position absolute places submenu correctly.

Practice

1. What is the main purpose of using nested lists in HTML?

easy

A. To organize information into groups and subgroups

B. To add images inside list items

C. To change the font style of list items

D. To create buttons inside lists

Solution

1. Step 1: Understand the role of nested lists

   Nested lists allow placing one list inside another to show hierarchy or subgroups.

2. Step 2: Identify the correct purpose

   Organizing information into groups and subgroups matches the use of nested lists.

3. Final Answer:

   To organize information into groups and subgroups -> Option A

4. Quick Check:

   Nested lists = groups and subgroups [OK]

Hint: Nested lists group items inside other lists [OK]

Common Mistakes:

• Thinking nested lists add images
• Confusing nested lists with styling
• Believing nested lists create buttons

2. Which of the following is the correct syntax to start a nested unordered list inside a list item?

easy

A. <li><ul>

B. <ul><li>

C. <ol><ul>

D. <li><ol>

Solution

1. Step 1: Recall nested list structure

   A nested list must be inside a list item, so
2. comes first.

3. Step 2: Identify correct tag order

   Starting a nested unordered list inside a list item uses <li><ul>.

4. Final Answer:

   <li><ul> -> Option A

5. Quick Check:

   Nested list starts inside <li> [OK]

Hint: Nested list always starts inside a list item <li> [OK]

Common Mistakes:

• Starting nested list outside <li>
• Mixing <ul> and <ol> incorrectly
• Placing <li> before <ul> in wrong order

3. What will be the visual result of this HTML code?

<ul>
  <li>Fruit
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

medium

A. A numbered list with 'Fruit' and 'Vegetables' only

B. A bulleted list with 'Fruit' having a nested bulleted list of 'Apple' and 'Banana', and 'Vegetables' as a separate item

C. A bulleted list with 'Fruit', 'Apple', 'Banana', and 'Vegetables' all at the same level

D. An error because nested lists are not allowed inside list items

Solution

1. Step 1: Analyze the list tags

   The outer list is unordered (<ul>), so bullets appear. 'Fruit' has a nested <ul> with 'Apple' and 'Banana'.

2. Step 2: Understand nesting effect

   'Apple' and 'Banana' appear as a sub-bulleted list under 'Fruit'. 'Vegetables' is a separate top-level bullet.

3. Final Answer:

   A bulleted list with 'Fruit' having a nested bulleted list of 'Apple' and 'Banana', and 'Vegetables' as a separate item -> Option B

4. Quick Check:

   Nested <ul> creates sub-bullets [OK]

Hint: Nested <ul> creates sub-bullets under parent item [OK]

Common Mistakes:

• Thinking nested items appear at same level
• Confusing bullets with numbers
• Believing nested lists cause errors

4. Identify the error in this nested list HTML code:

<ul>
  <li>Item 1</li>
  <ul>
    <li>Subitem 1</li>
  </ul>
  <li>Item 2</li>
</ul>

medium

A. There should be no nested lists inside <ul>

B. The <li> tags are missing closing tags

C. The nested <ul> is not inside a <li> element

D. The outer <ul> should be an <ol>

Solution

1. Step 1: Check nested list placement

   The nested <ul> appears directly inside the outer <ul>, not inside any <li>.

2. Step 2: Understand correct nesting rules

   A nested list must be inside a list item (<li>), so this structure is invalid.

3. Final Answer:

   The nested <ul> is not inside a <li> element -> Option C

4. Quick Check:

   Nested list must be inside <li> [OK]

Hint: Nested lists must be inside a list item <li> [OK]

Common Mistakes:

• Placing nested <ul> directly inside <ul>
• Forgetting to close <li> tags
• Thinking <ul> and <ol> are interchangeable here

5. You want to create a nested list where the top level is numbered and the nested level is bulleted. Which HTML structure correctly achieves this?

hard

A. <ul>\n <li>Main Item</li>\n <ul>\n <li>Sub Item</li>\n <ul>\n</ul>

B. <ul>\n <li>Main Item\n <ol>\n <li>Sub Item</li>\n </ol>\n </li>\n</ul>

C. <ol>\n <li>Main Item</li>\n <ol>\n <li>Sub Item</li>\n </ol>\n</ol>

D. <ol>\n <li>Main Item\n <ul>\n <li>Sub Item</li>\n </ul>\n </li>\n</ol>

Solution

1. Step 1: Identify top-level list type

   The top level should be numbered, so use <ol> for the main list.

2. Step 2: Identify nested list type

   The nested list should be bulleted, so use <ul> inside a <li> of the <ol>.

3. Step 3: Check correct nesting

   The nested <ul> is correctly placed inside a <li> of the <ol>.

4. Final Answer:

   <ol> with nested <ul> inside <li> -> Option D

5. Quick Check:

   Numbered <ol> with bulleted <ul> nested inside [OK]

Hint: Use <ol> for numbers, <ul> inside <li> for bullets [OK]

Common Mistakes:

• Placing nested list outside <li>
• Using same list type for both levels
• Incorrectly closing tags