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.