collapsing/expanding nested lists (pure CSS)

[FND]

[Disclaimer: The following hack will not work in IE*.]

Since I have a couple of nested lists in my ToDo tiddler, I've come up
with a bit of CSS to dynamically collapse and expand those nested lists.
(This will hopefully keep my tiddler from growing too tall.)

Let's say you have a tiddler with the following content:
* #1
** #1-1
*** #1-1-1
* #2
** #2-1
*** #2-1-1
*** #2-1-2
** #2-2
*** #2-2-1
*** #2-2-2
With the help of CSS, we can hide everything except #1 and #2. The
nested items will expand only when hovering over the respective parent item.

Sounds confusing? Just copy the following CSS code into your StyleSheet
and give it a try:
/* ''Collapsing/Expanding Nested Lists'' */
/*{{{*/
#tiddlerDisplay > * > * > ul li:hover { color: red; }
ul ul li {
display: none;
}
#tiddlerDisplay > * > * > ul:hover ul li {
display: list-item;
}
#tiddlerDisplay > * > * > ul > ul:before {
content: "more...";
margin-left: -2em;
border: 1px solid #bbbbbb;
padding: 0.1em 0.2em 0.1em 0.2em;
font-size: 0.9em;
color: #999999;
background-color: #eeeeee;
}
#tiddlerDisplay > * > * > ul:hover > ul:before {
display: none;
}
/*}}}*/
(The third line is optional; it just makes hovered items blush... ;) )

I'm no CSS wiz, so feel free to suggest improvements!

-- F.

PS: I'm afraid hovering over a list item will expand all nested lists. I
can't fix that, as it is due to TW's current handling of nested lists
(see the thread on "[bug] nested lists: non-valid HTML?" for details).

* The problem is that IE6 supports neither child selectors ("foo > bar")
nor the ":before" pseudo class. (Not exactly sure about IE7.)
While the former might be fix-able by using descendant selectors
("foo bar") instead, there's no workaround for the latter - though
it's only used to make this hack visually more appealing.

[FND]

Minor bugfix: line 4 should be
#tiddlerDisplay > * > * > ul ul li {
Without this, nested lists in custom class containers
("{{class{...}}}") would not show up.

Here's the complete package:

/* ''Collapsing/Expanding Nested Lists'' */
/*{{{*/
#tiddlerDisplay > * > * > ul li:hover { color: red; }

#tiddlerDisplay > * > * > ul ul li {

display: none;
}
#tiddlerDisplay > * > * > ul:hover ul li {
display: list-item;
}
#tiddlerDisplay > * > * > ul > ul:before {
content: "more...";
margin-left: -2em;
border: 1px solid #bbbbbb;
padding: 0.1em 0.2em 0.1em 0.2em;
font-size: 0.9em;
color: #999999;
background-color: #eeeeee;
}
#tiddlerDisplay > * > * > ul:hover > ul:before {
display: none;
}
/*}}}*/

Got more bugs? "Bring 'em on!"

-- F.