Reset Depth of HTML list for root level (for bullets)

Question

As an example, I would like to set level 4 of the list in this fiddle (code below) to the root level. This would mean that bullets for level 4 would look like level 1, level 5 would look like level 2, and level 6 would look like level 3. This should happen without manually overlapping markers on an element, because different browsers have different bullet styles .

<ul>
    <li>level 1 item</li>
    <li>level 1 item
        <ul>
            <li>level 2 item</li>
            <li>level 2 item
                <ul>
                    <li>level 3 item</li>
                    <li>level 3 item
                        <ul>
                            <li>level 4 item</li>
                            <li>level 4 item
                                <ul>
                                    <li>level 5 item</li>
                                    <li>level 5 item
                                        <ul>
                                            <li>level 6 item</li>
                                            <li>level 6 item</li>
                                            <li>level 6 item</li>
                                        </ul>
                                    </li>
                                    <li>level 5 item</li>
                                </ul>
                            </li>
                            <li>level 4 item</li>
                        </ul>
                    </li>
                    <li>level 3 item</li>
                </ul>
            </li>
            <li>level 2 item</li>
        </ul>
    </li>
    <li>level 1 item</li>
</ul>

Answer 1

, , CSS ( <ul> <ol>, .) CSS :

ol > li > ul > li > ul > li > ul {
    list-style-type: square;
}
ul.initial > li > ul > li > ul {
    list-style-type: square;
}
ol > li > ul > li > ul {
    list-style-type: circle;
}
ul.initial > li > ul {
    list-style-type: circle;
}
ol > li > ul {
    list-style: initial;
}
ul.initial {
    list-style: initial;
}