How to create a multilevel list in HTML

Updated: 07/12/2017 by Computer Hope

Multilevel listCreating 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 within the HTML tags. In this example, we have two list items and in the second list item we've created another ordered list and given it the lower-alpha list-style-type to create an a, b, c, d, 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>

Note: In our above example we are using some additional padding and margin styles to help adapt to our global CSS values and to give an example of how you can add or reduce space and indentation.

Example of output

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

CSS and HTML example

The above solution 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 following example in your CSS file. 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.

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

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.

Additional information