How To Make Ordered Sub-list in CSS/HTML

Combination <ol> and <li> tags generate numbered list in HTML document, but it does not support numbered sub-list default. By adding 3 lines of CSS scripts, we can generate the numbered and ordered sub-list. The idea is from li:bofore style.

ol { counter-reset: item }
li { display: block ;font-weight:bold}
li:before { content: counters(item, ".") " "; counter-increment: item }

And Nested <ol><li> HTML tags generate the list.

<ol>
  <li>Item 1</li>
  <li>Item 2
    <ol><li>Item 2.1</li>
           <li>Item 2.2</li>
           <li>Item 2.3
              <ol><li>Item 2.3.1</li>
              </ol>
           </li>
    </ol>
  </li>
  <li>Item 3</li>
</ol>

The result page shows:

1. Item 1
2. Item 2
   1. Item 2.1
   2. Item 2.2
   3. Item 2.3
      1. Item 2.3.1
3. Item 3

If you want insert unordered list(<ul><li>) into the <li> tag in <ol>tag, just add following lines in your CSS script.

ul li:before {content:"- ";} // some symbols you want.