Lists can contain lists. These are called nested lists and are children of list items within the parent list. This form of nesting usually produces further indentation and different list styles for the nested list to show that nested items are sub-lists within an existing list item.
Let's expand our current personal gear list:
<p>Gear you need to provide:</p>
<ul>
<li>A bicycle</li>
<li>Sleeping bag, pad, and tent</li>
<li>Personal items</li>
<li>Cash</li>
<li>Bicycle Lock</li>
<li>Bicycle road repair kit</li>
<li>Road-snacks (gels, bars, etc.)</li>
</ul>Exiting code block.
We would like to give better examples of personal items and bicycle road repair kits.
Step1. Activate index.html in the code editor.
Step2. To add the first of the nested lists, type:
<ul>
<li>A bicycle</li>
<li>Sleeping bag, pad, and tent</li>
<li>Personal items
<ul>
<li>Book</li>
<li>Toiletries</li>
<li>Notebook</li>
<li>Camera</li>
<li>Water bottles</li>
</ul>
</li>
<li>Cash</li>
<li>Bicycle Lock</li>
<li>Bicycle road repair kit</li>
<li>Road-snacks (gels, bars, etc.)</li>
</ul>Exiting code block.
Step3. To add the bicycle road repair kit nested list, type:
<ul>
<li>A bicycle</li>
<li>Sleeping bag, pad, and tent</li>
<li>Personal items
<ul>
<li>Book</li>
<li>Toiletries</li>
<li>Notebook</li>
<li>Camera</li>
<li>Water bottles</li>
</ul>
</li>
<li>Cash</li>
<li>Bicycle Lock</li>
<li>Bicycle road repair kit
<ul>
<li>Extra tube</li>
<li>Multi-tool</li>
<li>Tube Patches</li>
</ul>
</li>
<li>Road-snacks (gels, bars, etc.)</li>
</ul>Exiting code block.
Step4. Save and refresh index.html.
