How to Make HTML Nested List

ol {
  counter-reset: main-counter, sub-counter;
  list-style-type:none;
  padding:0;
}
li {
  counter-increment: main-counter;
  counter-reset: sub-counter;
}
li::before {
  content: counter(main-counter) ". ";
}
li.sub-item {
  counter-increment: sub-counter;
  padding-left:1em;
  counter-reset: none;
}
li.sub-item::before {
  content: counter(sub-counter, lower-alpha) ". ";
}

<ol>
  <li>One</li>
  <li>Two</li>
  <li>THree</li>
  <li class="sub-item">Sub three 1</li>
  <li class="sub-item">Sub three 2</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li class="sub-item">Sub three 1</li>
  <li class="sub-item">Sub three 2</li>
  <li>Eight</li>
</ol>

HTML Nested List

It looks like your problem is improper nesting. If you want to put a list in a list, it needs to be nested within a nested list item (i.e. ul > li > ul), you should not have an unorder list directly in the root of another unordered list (i.e. ul > ul). This is also true for ordered lists (ol), and the mixture of ordered and unordered lists (e.g. ol>ul, ul>ol, ol>ul>ul>ol>ul, etc.) For more information on nesting, see the Stack Overflow question “Proper way to make HTML nested list?”.

Your code should look more like this:

<ul>
    <li>Out1</li>
    <li>Out2
        <ul>
            <li>In1</li>
            <li>In2
                <ul>
                    <li>De1</li>
                    <li>De2</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Out3
        <ul>
            <li>In3</li>
        </ul>
    </li>
</ul>

Additionally, your code displayed fine in my browser (Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36), but it was malformed.

---

Related Topics