Menu
Is there a way to achieve the below numbering using straight HTML and CSS lists (<ul> or <ol>)?
1. Link 1
2. Link 2
3. Link 3
3.1. Link 3.1
3.2. Link 3.2
3.3. Link 3.3
4. Link 4
4.1. Link 4.1
4.1.1 Link 4.1.1
4.1.2 Link 4.1.2
5. Link 5
Thanks in advance!
655
If you start a list, then stop to interject some other content, then begin the list again, you could use <ol start="..."> to continue numbering where you left off.
Correct: <ul> as child of <li> The proper way to make HTML nested list is with the nested <ul> as a child of the <li> to which it belongs. The nested list should be inside of the <li> element of the list in which it is nested.
A multilevel list is a list with more than one level. For example, the picture is an example of a multilevel bullet list and a multilevel numbered list. In the multilevel numbered list, there is an "a" and "b" item under 2.
You could use CSS counters:
ol {
counter-reset: section;
list-style-type: none;
}
li:before {
counter-increment: section;
content: counters(section, ".") ". Link " counters(section, ".") " ";
}
Working Demo (also on JSBin):
ol {
counter-reset: section;
list-style-type: none;
}
li:before {
counter-increment: section;
content: counters(section, ".") ". Link " counters(section, ".") " ";
}<ol>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li>
<ol>
<li>
<ol>
<li></li>
<li></li>
</ol>
</li>
</ol>
</li>
<li></li>
</ol>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
