Ελαφρά τη καρδία Φρυγανισ

Russ δημοσιεύει άρθρο με τίτλο «Λίστες μέσα σε λίστες χρησιμοποιούνται για να δημιουργηθεί ένα απλό φάκελο metaphore". Νόμιζα ότι έπαιρνα εφαρμόζουν την ίδια mark-up και να αλλάξουν το CSS για τη δημιουργία Αριστερό πλοήγησης για την αποκατάσταση σκοπό την επαναχρησιμοποίηση και τον ίδιο κωδικό. Μέχρι εδώ πάει. Φυσικά, θα ήθελα από εσάς επιθυμείτε αλλαγή του μεγέθους να em pixel και καθιστά όλα τα συγγενή. Το CSS μπορεί επίσης να εκσυγχρονιστεί λίγο περισσότερο.

HTML

<ul id="sitemap">
<li> <a href="#"> Θέση 1 </ a> </ li>
<li> <a href="#"> Θέση 2 </ a> </ li>
<li> <a href="#"> Θέση 3 </ a> </ li>
<li> <a href="#" class="open"> Θέση 4 </ a>

<ul>
<li> <a href="#"> υπο-θέση 1 </ a> </ li>
<li> <a href="#"> υπο-θέση 2 </ a> </ li>
<li> <a href="#" class="open"> υπο-θέση 3 </ a>

<ul>
<li> <a href="#"> υπο-υπο-θέση 1 </ a> </ li>
<li> <a href="#"> υπο-υπο-θέση 2 </ a> </ li>
<li> <a href="#" class="open"> υπο-υπο-θέση 3 </ a>

<ul>
<li> <a href="#"> υπο-υπο-υπο-θέση 1 </ a> </ li>
<li> <a href="#"> υπο-υπο-υπο-θέση 2 </ a> </ li>
<li> <a href="#"> υπο-υπο-υπο-θέση 3 </ a> </ li>
<li> <a href="#"> υπο-υπο-υπο-θέση 4 </ a> </ li>
</ ul>

</ li>

<li> <a href="#"> υπο-υπο-θέση 4 </ a> </ li>
</ ul>
</ li>

<li> <a href="#"> υπο-θέση 4 </ a> </ li>
</ ul>
</ li>

<li> <a href="#"> Θέση 5 </ a> </ li>
<li> <a href="#"> Θέση 6 </ a> </ li>
</ ul>

CSS

ul # Sitemap (
σύνορα: ΚΑΝΕΝΑ?
περιθώριο: 0?
list-style-type: ΚΑΝΕΝΑ?
υπόβαθρο-χρώμα: # FFF?
παραγέμισμα: 0?
πλάτος: 175px?
font: κανονικός 93% Verdana, sans-serif?
σύνορα δικαίωμα: 1px στερεό # f3f1ed?
Χρώμα: # 333?
float: αριστερά?
περιθώριο: 0 0 1em 0?
)

ul # Sitemap LI (περιθώριο-κάτω: 0?)

ul # Sitemap LI μία (
υπόβαθρο: url (arrow_black_r.gif) δικαίωμα μη-επαναλαμβάνω DFDBD5 #?
Χρώμα: # 000?
font-weight: τολμηρή?
απεικόνιση: block?
παραγέμισμα: 7px 7px 7px 0.5em?
text-decoration: ΚΑΝΕΝΑ?
πλάτος: auto?
)

ul # Sitemap LI a.open (
background: # f3f1ed url (arrow_brown_d.gif) δεν επαναλαμβάνω-δεξιά?
Χρώμα: # 6a2b04?
font-weight: τολμηρή?
)

ul # Sitemap LI LI a.open (
background: # e3e0db url (arrow_brown_d.gif) δεν επαναλαμβάνω-δεξιά?
Χρώμα: # 6a2b04?
font-weight: τολμηρή?
)

ul # Sitemap LI LI LI a.open (
background: # dfdbd5 url (arrow_brown_d.gif) δεν επαναλαμβάνω-δεξιά?
Χρώμα: # 6a2b04?
font-weight: τολμηρή?
)

ul # Sitemap LI LI LI LI a.open (
background: # dfdbd5 url (arrow_brown_d.gif) δεν επαναλαμβάνω-δεξιά?
Χρώμα: # 6a2b04?
font-weight: τολμηρή?
)

/ * Δεύτερο επίπεδο * /

ul # Sitemap ul (
περιθώριο: 0 0 0 0?
παραγέμισμα: 0?
list-style-type: ΚΑΝΕΝΑ?
)

ul # Sitemap li li (background: url (dot2.gif) δεν-επαναλαμβάνω?)

ul # Sitemap LI LI μία (
υπόβαθρο: url (arrow_or_r.gif) 5px επαναλαμβάνω-δεν F3F1ED #?
Χρώμα: # 000?
font-weight: κανονική?
απεικόνιση: block?
παραγέμισμα: 7px 7px 7px 1.3em?
text-decoration: ΚΑΝΕΝΑ?
πλάτος: auto?
)

/ * Τρίτο επίπεδο * /

ul # Sitemap ul ul (
υπόβαθρο: url (dot.gif) επαναλαμβάνω-y 30px 0?
)

ul # Sitemap LI LI LI (
υπόβαθρο: url (dot2.gif) δεν επαναλαμβάνω-30px .5 em?
)

ul # Sitemap LI LI LI μία (
παραγέμισμα: .5 em 0 .5 em 2.5em?
υπόβαθρο: url (arrow_or_r.gif) 18px επαναλαμβάνω-δεν F3F1ED #?
)

/ * Τέταρτο επίπεδο * /

ul # Sitemap ul ul ul (
υπόβαθρο: url (dot.gif) επαναλαμβάνω-y 60px 0?
)
ul # Sitemap LI LI LI LI (
υπόβαθρο: url (dot2.gif) δεν επαναλαμβάνω-60px 0?
)
ul # Sitemap LI LI LI LI μία (
παραγέμισμα: .5 em 0 .5 em 3.5em?
υπόβαθρο: url (arrow_or_r.gif) 31px επαναλαμβάνω-δεν F3F1ED #?
)
Α σύνδεσμος (
Χρώμα: # 000?
υπόβαθρο-χρώμα: διαφανές?
)
A: πλανιέμαι (
Χρώμα: # b64908?
)