Multi-level tree with markers (only HTML, CSS, without Javascript)

Before I started doing the German guitar chords (articles 1 , 2 , 3 ) I was faced with the need to make a man on the site a menu-tree. I didn’t want to draw at all, so I took the good old HTML with CSS and started making this tree, I started with a simple one-level, and later I made a multi-level with markers, which I will introduce.

Later this tree gave me fruits in the form of habrahabr.ru/blogs/css/53792

Layered tree

The implementation uses only HTML and CSS, no images.
To draw a list disclosure marker, I used CSS technique with borders of zero block size.

Written sequel with scripts.
')

HTML

< div id ="multi-derevo" >
< h4 >< a href ="#" > </ a ></ h4 >
< ul >
< li >< span >< a href ="#1" >< em class ="marker open" ></ em > 1. </ a ></ span >
< ul >
< li >< span >< a href ="#11" class ="current" title =" " >< em class ="marker open" ></ em > 1.1. </ a ></ span >
< ul >
< li >< span >< a href ="#111" > 1.1.1. </ a ></ span ></ li >
< li >< span >< a href ="#112" > 1.1.2. </ a ></ span ></ li >
</ ul >
</ li >
< li >< span >< a href ="#12" > 1.2. </ a ></ span ></ li >
</ ul >
</ li >
< li >< span >< a href ="#2" >< em class ="marker" ></ em > 2. </ a ></ span ></ li >
< li >< span >< a href ="#3" >< em class ="marker" ></ em > 3. </ a ></ span ></ li >
< li >< span >< a href ="#4" >< em class ="marker" ></ em > 4. </ a ></ span ></ li >
< li class ="last" >< span >< a href ="#5" title =" " >< em class ="marker open" ></ em > 5. , </ a ></ span >
< ul >
< li >< span >< a href ="#1" > 5.1. </ a ></ span ></ li >
< li >< span >< a href ="#1" > 5.2. </ a ></ span ></ li >
</ ul >
</ li >
</ ul >
</ div ><! -- / multi-derevo -- >


CSS

/* */
body {font-family: Arial, Tahoma, sans-serif; margin: 2em; font-size: 62.5%;}
p {
font-size: 1.2em;
}
a {
color: #0066cc;
text-decoration: none;
outline: none;
}
/*a:link {
color: #0066cc;
}
a:visited {color: #00cc63; }*/
a:hover {
text-decoration: underline;
}
a:active, a:focus {
color: #666;
background-color: #f4f4f4;
}
a.current {
color: black;
font-weight: bold;
}

/*
-------------------------------- */
#multi-derevo {
width: 220px; /* */
border: solid; /* */
border-color: silver gray gray silver;
border-width: 2px;
padding: 0 0 1em 0; /* */
font-size: 1.3em;
}
span { /* */
text-decoration: none;
display: block; /* */
margin: 0 0 0 1.2em;
background-color: transparent;
border: solid silver; /* */
border-width: 0 0 1px 1px; /* : */
}
span a { /* */
display: block;
position: relative;
top: .95em; /* */
background-color: #fff; /* */
margin: 0 0 .2em .7em; /* , */
padding: 0 0.3em; /* */
}
h4 { /* */
font-size: 1em;
font-weight: bold;
margin: 0;
padding: 0 .25em;
border-bottom: 1px solid silver;
}
h4 a {
display: block;
}
ul, li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
}
ul li {
line-height: 1.2em;
}
ul li ul {}
ul li ul li {
margin: 0 0 0 1.2em;
border-left: 1px solid silver; /* */
}
ul li.last ul li { /* , . */
border: none;
}
.marker { /* */
border-color: transparent transparent transparent gray;
border-style: solid;
border-width: .25em 0 .25em .5em;
margin: .35em .25em 0 0;
float : left;
width: 0px;
height: 0px;
line-height: 0px;
}
.marker.open { /* */
border-color: gray transparent transparent transparent;
border-width: .5em .25em 0 .25em;
}
/* IE 6 Fixup */
* html #multi-derevo * { height: 1%;}
* html .marker { border-style: dotted dotted dotted solid; }
* html .open { border-style: solid dotted dotted dotted; }

* This source code was highlighted with Source Code Highlighter .

See the full code and working example .

Continuing the theme in the article . Nodes are now unfolding, as many have expected.

Tested in FF3, IE6-8, Opera 9, Google Chrome, Safari 4 Beta.

Updates:
UPD 03/28/2009: changes were made to support IE 6 (thanks to alemiks );
UPD 03/30/2009: Safari 4 Beta and Firefox 3.0.0.7 , IE8 under Win7 (checked by anton_ivanov ), works in IE6, Mac OS X 10.5.6, typos in the text have been corrected (thanks to ferrari ).
UPD 03/31/2009: Added to css for links outline: none, given: active,: focus. The demo is updated.
UPD 04/04/2009: The code is improved using jQuery. Now the nodes open. Details in the article .
UPD 05/19/2011: A variant was made with remembering the state of the tree in Cookies .
UPD 02.24.2012: Made the second design option on request sanch3z .