How to create a multilevel list in HTML

Creating a multilevel list in HTML (HyperText Markup Language) is harder than creating a multilevel list in a word processor, but can still be achieved using HTML and CSS (Cascading Style Sheets). Below are steps to create a multilevel list in HTML with the aid of CSS.

Before trying the following steps, realize that to create a multilevel list in HTML you must nest the list into another list item. Also, because HTML only has either a bullet list or number list, to change the type of list, you must use CSS to create a new style type.

HTML example

Below is an example of how a multilevel list can be done in HTML using HTML and the CSS style defined in the HTML tags. In this example, we have two list items and in the second list item another ordered list with a lower-alpha list-style-type to create an a, b, etc. list style.

<ol>
 <li>First</li>
 <li>Second
 <ol style="list-style-type: lower-alpha; padding-bottom: 0;">
  <li style="margin-left:2em">Sub of Second</li>
  <li style="margin-left:2em; padding-bottom: 0;">Another Sub</li>
 </ol>
 </li>
 <li>Third</li>
 <li>Fourth </li>
</ol>

Example of output

1. First
2. Second
   1. Sub of Second
   2. Another Sub
3. Third
4. Fourth

CSS and HTML example

The solution above works great if you only need to create a multilevel list a few times. However, if you intend to have several multilevel lists throughout your site, it would be a better idea to include CSS code similar to the example below. In our example, we created two classes called "roman" and "square" and call them in the HTML code.

CSS code

<style type="text/css">
.roman {
 list-style-type: lower-roman;
}
.square {
 list-style-type: square;
 margin-left: -2em;
}
</style>

HTML code

<ul class="roman">
 <li>First</li>
 <li>Second
 <ul class="square">
  <li>Sub of Second</li>
  <li>Another Sub</li>
 </ul>
 </li>
 <li>Third</li>
 <li>Fourth</li>
</ul>

Example of output

• First
• Second
  • Sub of Second
  • Another Sub
• Third
• Fourth

Available CSS list-style-type values

Below is a listing of other CSS list-style-type values that can be used in place of the examples we showed earlier. We've also included a brief description of each value.

disc - Small solid circle (shown above).
circle - Small empty circle (shown above).
square - Solid square.
decimal - Decimal number starting with "1." (shown above).
decimal-leading-zero - Decimal number beginning with 0 (e.g., 01, 02, 03, etc.).
lower-roman - Lowercase roman numeral starting with "i.".
upper-roman - Uppercase roman numeral starting with "I.".
lower-greek - Lowercase Greek.
lower-latin - Lowercase Latin
upper-latin - Uppercase Latin
armenian - Traditional Armenian numbering
georgian - Traditional Georgian numbering
lower-alpha - Lowercase alphabetic lettering starting with "a." (shown above).
upper-alpha - Uppercase alphabetic lettering starting with "A.".
none - Show nothing.