Pure CSS Tree Menu
The CSS Ninja's CSS-only collapsible tree menu, it uses no JavaScript. Instead it uses some CSS3 pseudo classes along with some of the CSS2 selectors. The HTML Markup is full of unordered lists (ul) to form the tree structure, checkboxes for the non-leaf nodes, radio buttons for leave nodes and labels. As you can see, the ul elements are placed right after the input elements (which are placed right after the labels) and then the ul is easily targetted in the CSS using the next sibling selector which is + along with the CSS3 :checked selector (that helps us to open the different folders/tree nodes). The CSS Code is really small which is quite amazing!
I made some changes to the original tree menu. See the original tutorial and demo here. Also check out this document for more information on all the CSS Selectors.