ordered list - loop numbers in sub-menus

Question

I have ordered list:

HTML:

<ol>
    <li>Item</li>
    <li>Item
        <ol>
            <li>Item</li>
            <li>Item</li>
        </ol>
    </li>
    <li>Item</li>
    <li>Item</li>
<ol>

Output:

1. Item
2. Item
    1. Item
    2. Item
3. Item
4. Item

Quesion:

How apply counting for sub-levels ?

Note: looking for simple solution CSS/HTML

Wanted output:

1. Item
2. Item
    2.1. Item
    2.2. Item
3. Item
4. Item

Possible duplicat http://stackoverflow.com/questions/9930732/html-ordered-sublists — Vucko, Sep 16 '13 at 11:23
have a look at http://www.w3schools.com/cssref/pr_gen_counter-increment.asp — Vinay Pratap Singh Bhadauria, Sep 16 '13 at 11:23

score 4 · Accepted Answer · answered Sep 16 '13 at 11:23

4

ol {
    list-style-type: none;
    counter-reset: item;
}
li:before {
    content: counters(item, ".")". ";
    counter-increment: item
}

answered Sep 16 '13 at 11:23

gvee

16,732
35
50

Perfect! Superb answer. Its since CSS2 :) – Chirag Vidani Sep 16 '13 at 11:29

ordered list - loop numbers in sub-menus

HTML:

Output:

Quesion:

1 Answers1