Nidificata lista di creare 'N'-livelli di navigazione sinistra

Russ pubblicato un articolo su "elenchi annidati utilizzato per creare una cartella semplice metafora". Thought I'd applicare la stessa mark-up e cambiare il codice CSS per creare barra di navigazione a sinistra alla fine e ri-ri-utilizzare lo stesso codice. Così qui va. 'Corso, mi aspetto che lei sarebbe il cambiamento di dimensioni in pixel e fare tutto rispetto. Il CSS può essere anche un po 'più snella.

HTML

<ul id="sitemap">
<a href="#"> <li> voce 1 </ a> </ li>
<a href="#"> <li> voce 2 </ a> </ li>
<a href="#"> <li> punto 3 </ a> </ li>
<li> <a href="#" class="open"> punto 4 </ a>

<ul>
<a href="#"> <li> sotto-voce 1 </ a> </ li>
<a href="#"> <li> sotto-voce 2 </ a> </ li>
<li> <a href="#" class="open"> sotto-voce 3 </ a>

<ul>
<a href="#"> <li> sotto-sotto-voce 1 </ a> </ li>
<a href="#"> <li> sotto-sotto-voce 2 </ a> </ li>
<li> <a href="#" class="open"> sotto-sotto-voce 3 </ a>

<ul>
<a href="#"> <li> sotto-sotto-sotto-voce 1 </ a> </ li>
<a href="#"> <li> sotto-sotto-sotto-voce 2 </ a> </ li>
<a href="#"> <li> sotto-sotto-sotto-voce 3 </ a> </ li>
<a href="#"> <li> sotto-sotto-sotto-voce 4 </ a> </ li>
</ ul>

</ li>

<a href="#"> <li> sotto-sotto-voce 4 </ a> </ li>
</ ul>
</ li>

<a href="#"> <li> sotto-voce 4 </ a> </ li>
</ ul>
</ li>

<a href="#"> <li> punto 5 </ a> </ li>
<a href="#"> <li> punto 6 </ a> </ li>
</ ul>

CSS

ul # (sitemap
border: none;
margin: 0;
list-style-type: none;
background-color: # fff;
padding: 0;
width: 175px;
font: normale 93% verdana, sans-serif;
border-right: 1px solid # f3f1ed;
color: # 333;
float: left;
margin: 0 0 1em 0;
)

ul # sitemap li (margin-bottom: 0;)

ul # sitemap uno li (
background: url (arrow_black_r.gif) diritto di no-repeat # DFDBD5;
color: # 000;
font-weight: bold;
display: block;
padding: 7PX 7PX 7PX 0.5em;
text-decoration: none;
width: auto;
)

ul # sitemap li a.open (
background: # f3f1ed url (arrow_brown_d.gif) no-repeat diritto;
color: # 6a2b04;
font-weight: bold;
)

ul # sitemap li li a.open (
background: # e3e0db url (arrow_brown_d.gif) no-repeat diritto;
color: # 6a2b04;
font-weight: bold;
)

ul # sitemap li li li (a.open
background: # dfdbd5 url (arrow_brown_d.gif) no-repeat diritto;
color: # 6a2b04;
font-weight: bold;
)

ul # sitemap li li li li a.open (
background: # dfdbd5 url (arrow_brown_d.gif) no-repeat diritto;
color: # 6a2b04;
font-weight: bold;
)

/ * Secondo livello * /

ul # sitemap ul (
margin: 0 0 0 0;
padding: 0;
list-style-type: none;
)

ul # sitemap li li (background: url (dot2.gif) no-repeat;)

ul # sitemap li li a (
background: url (arrow_or_r.gif) no-repeat 5px # F3F1ED;
color: # 000;
font-weight: normal;
display: block;
padding: 7PX 7PX 7PX 1.3em;
text-decoration: none;
width: auto;
)

/ * Terzo livello * /

ul # sitemap ul ul (
background: url (dot.gif) repeat-y 30px 0;
)

ul # sitemap li li li (
background: url (dot2.gif) no-repeat ,5 em 30px;
)

ul # sitemap li li li a (
padding: .5 em 0 .5 em 2.5em;
background: url (arrow_or_r.gif) no-repeat 18px # F3F1ED;
)

/ * Quarto livello * /

ul # sitemap ul ul ul (
background: url (dot.gif) repeat-y 60px 0;
)
ul # sitemap li li li li (
background: url (dot2.gif) no-repeat 60px 0;
)
ul # sitemap li li li li a (
padding: .5 em 0 .5 em 3.5em;
background: url (arrow_or_r.gif) no-repeat 31px # F3F1ED;
)
a: link (
color: # 000;
background-color: trasparente;
)
a: hover (
color: # b64908;
)