wrong numbering in table of contents in HTML - html

Question

I am trying to write Table of Contents using HTML in a file. The numbering that appears in my Table of Contents is flawed. How can I modify the following CSS and HTML so that the fourth bullet point in my Output is 4 instead of 3.4?
ol {
counter-reset: item;
}
ol li {
line-height: 30px;
}
ol ol li {
line-height: 20px;
}
li {
display: block;
}
li:before {
content: counters(item, ".")" ";
counter-increment: item;
}
<ol>
<li>
lorem ipsum
</li>
<li>
Set
</li>
<li>
Title
</li>
<ol>
<li>
Class
</li>
<li>
Something
</li>
<li>
Action
</li>
</ol>
<li>
Table of References
</li>
</ol>
Output
1. Lorem Ipsum
2. Set
3. Title
3.1. Class
3.2. Something
3.3. Action
3.4. Table of References

Answer 1

As the comment said (#Jon P): Your HTML is invalid. You can not have ol as a direct descendant of ol it needs to be wrapped in a li.
To nesting lists properly, just move the sub ol inside the 3rd li, check the example below:
REF: https://developer.mozilla.org/en/docs/Web/HTML/Element/ol
ol {
counter-reset: item;
}
ol li {
line-height: 30px;
}
ol ol li {
line-height: 20px;
}
li {
display: block;
}
li:before {
content: counters(item, ".")" ";
counter-increment: item;
}
<ol>
<li>
lorem ipsum
</li>
<li>
Set
</li>
<li>
Title
<ol>
<li>
Class
</li>
<li>
Something
</li>
<li>
Action
</li>
</ol>
</li>
<li>
Table of References
</li>
</ol>

Answer 2

You're closing your LI tag too early after Title - move it below the OL section, like this:
<ol>
<li>
lorem ipsum
</li>
<li>
Set
</li>
<li>
Title
<ol>
<li>
Class
</li>
<li>
Something
</li>
<li>
Action
</li>
</ol>
</li>
<li>
Table of References
</li>
</ol>