Creating a multilevel list in HTML is harder than creating a multilevel list in a word processor, but can still be achieved using HTML and CSS. Below are steps on how 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, if you want 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.

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

Example of output

  • First
  • Second
  • Sub of Second
  • Another Sub
  • Third
  • 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.

In our example above, we’re using additional padding and margin to help adapt to our global CSS values to give an example of how you can add or re duce indentation.

  • Sub of Second
  • Another Sub

CSS code

HTML code

  • 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.

Not all of these values work or appear the same in all browsers.

  • How to create a multilevel list in a word processor.
  • See the multilevel list definition for further information and related links.
  • HTML and web design help and support.