Nested Bullet Lists

Nested bullet lists are lists inside of lists. You can put an unordered list inside an unordered list and vice versa. Here's an example of a nested bullet list:

  • Original list 1
    • Nested unordered list 1
    • Nested unordered list 2
  • Original list 2
    1. Nested ordered list 1
    2. Nested ordered list 2
  • Original list 3

The above example is an unordered list and an ordered list nested inside of an unordered list. This can be used in creating a site index or any kind of "menu" with multiple tiers categories.

Here's the HTML coding to make nested bullet lists like the above example:

<html>
<head>
</head>
<body>
<ul>
<li>Original list 1</li>
<ul>
<li>Nested unordered list 1</li>
<li>Nested unordered list 2</li>
</ul>
<li>Original list 2</li>
<ol>
<li>Nested ordered list 1</li>
<li>Nested ordered list 2</li>
</ol>
<li>Original list 3</li>
</ul>
</body>
</html>

Note that the nested list does not need to be between <li> tags. You open and close it between two elements of the original list.

You can nest lists inside nested list. You can have as many layers as you want but beware that the width of each nested list will be progressively smaller for each new layer.


Back
Adding a List in HTML		Next
HTML Code For Tables