Multi-level in an OL

Question

I’m trying to get the following result:

1. Presentation

   1.1. Content

   1.2. Programming

   1.2.1. JAVA

   1.2.2. DOTNET

2. Completion

   2.1. Acknowledgements

   2.1.1 Family

   2.1.2. Teachers

3. End

Through the following HTML:

<ol>
    <li>Apresentacao</li>
    <ol>
        <li> Conteudo </li>
        <li> Programação </li>
        <ol>
            <li> JAVA </li>
            <li> DOTNET </li>
        </ol>
    </ol>
    <li>Conclusão</li>
    <ol>
        <li> Agradecimentos</li>
         <ol>
            <li> Família </li>
            <li> Professores </li>
        </ol>
    </ol>
    <li>Fim</li>
</ol>

I came closer through the following CSS:

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

Example

But it still creates some problems.

Is there any feature of CSS or HTML to get my result?

Answer 1

You need to leave the tag open <li> each level and close when another level starts.

Corrected code:

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

<ol>
    <li class="reseta">Apresentacao
	    <ol>
		    <li> Conteudo </li>
		    <li> Programação </li>
		    <ol>
		        <li> JAVA </li>
		        <li> DOTNET </li>
	        </ol>
	    </ol>
    </li>
	<li class="reseta">Conclusão
        <ol>
            <li> Agradecimentos</li>
             <ol>
                <li> Família </li>
                <li> Professores </li>
            </ol>
        </ol>
    </li>
	<li>Fim</li>
</ol>

Example in Fiddle

Answer 2

A possible solution:

body {
    counter-reset: chapter; /* contador de capitulos */
}
ol {
   list-style-type: none;
}
.chapter > li:before {
   counter-increment: chapter; 
   content: counter(chapter)"."; 
}
ol.section {
    counter-reset: section;
}

ol.section > li:before { 
    content: counter(chapter)"."counter(section)" "; 
    counter-increment: section;
}

ol.subsection {
    counter-reset: subsection;
}

ol.subsection > li:before { 
    content: counter(chapter)"."counter(section)"."counter(subsection)" "; 
    counter-increment: subsection;
}

And in HTML

<ol class="chapter">
    <li>Apresentacao</li>
    <ol class="section">
        <li> Conteudo </li>
        <li> Programação </li>
        <ol class="subsection">
            <li> JAVA </li>
            <li> DOTNET </li>
        </ol>
    </ol>
    <li>Conclusão</li>
    <ol class="section">
        <li> Agradecimentos</li>
         <ol class="subsection">
            <li> Família </li>
            <li> Professores </li>
        </ol>
    </ol>
    <li>Fim</li>
</ol>

Fiddle