Changing list-types in one CSS list? (sq to upper-alpha to decimal, etc.)

[deanna85]

Hello!

I'm creating a CSS unordered list which will ultimately be like a toggle branch. As the user clicks on a header, another list will drop down. This happens several times throughout the entire list.

However, here's the catch: I need the sub-lists to change list-types each time. So... one sub-list will be ordered with squares, another with numbers, and another with capital letters.

Here is an image of what it should look like: http://aed-design.org/ul/unordered_ordered.jpg

I understand the difference between ordered and unordered lists, but I need all of these sub-lists to be housed under ONE main unordered list. Is this doable? Any help is greatly appreciated! Thanks!

Deanna

[KDLA]

Use CSS classes:

ul.alpha {list-style-type: upper-roman;}
ul.no {list-style-type: decimal;}
ul.box {list-style-type: square;}

You'll indicate the type in your HTML:

<ul class="box">
<li>text
<ul class="alpha">
<li>text</li>
<li>text
<ul class="no">
<li>text</li>
</ul>
</li>
</ul>
</li>
</ul>