Lồng danh sách để tạo ra 'n'-cấp độ còn lại tay Danh mục chính

Russ đăng một bài viết về "Lồng danh sách được sử dụng để tạo ra một thư mục đơn giản metaphore". Tôi nghĩ muốn áp dụng cùng một đánh dấu-lên và thay đổi CSS để tạo ra còn lại-tay lại để hướng mục đích và tái sử dụng cùng một mã. Vì vậy, đây đi. 'Khóa học, tôi mong muốn bạn muốn thay đổi kích cỡ pixel để em và nó làm cho tất cả các thân nhân. The CSS cũng có thể được gọn thêm một chút.

HTML

<ul id="sitemap">
<li> <a href="#"> khoản 1 </ a> </ li>
<li> <a href="#"> mục 2 </ a> </ li>
<li> <a href="#"> mục 3 </ a> </ li>
<li> <a href="#" class="open"> mục 4 </ a>

<ul>
<li> <a href="#"> pd-mục 1 </ a> </ li>
<li> <a href="#"> pd-mục 2 </ a> </ li>
<li> <a href="#" class="open"> pd-mục 3 </ a>

<ul>
<li> <a href="#"> sub-sub-mục 1 </ a> </ li>
<li> <a href="#"> sub-sub-mục 2 </ a> </ li>
<li> <a href="#" class="open"> sub-sub-mục 3 </ a>

<ul>
<li> <a href="#"> sub-sub-sub-mục 1 </ a> </ li>
<li> <a href="#"> sub-sub-sub-mục 2 </ a> </ li>
<li> <a href="#"> sub-sub-sub-mục 3 </ a> </ li>
<li> <a href="#"> sub-sub-sub-mục 4 </ a> </ li>
</ ul>

</ li>

<li> <a href="#"> sub-sub-mục 4 </ a> </ li>
</ ul>
</ li>

<li> <a href="#"> pd-mục 4 </ a> </ li>
</ ul>
</ li>

<li> <a href="#"> mục 5 </ a> </ li>
<li> <a href="#"> mục 6 </ a> </ li>
</ ul>

CSS

Sơ đô trang ul # (
biên giới: none;
margin: 0;
danh sách-style-type: none;
background-color: # fff;
padding: 0;
width: 175px;
font: bình thường 93% Verdana, sans-serif;
border-right: 1px solid # f3f1ed;
color: # 333;
float: left;
margin: 0 0 1em 0;
)

Sơ đô trang người # ul (margin-bottom: 0;)

Sơ đô trang ul # một người (
background: url (arrow_black_r.gif) không có quyền-# DFDBD5 lặp lại;
color: # 000;
font-weight: bold;
hiển thị: block;
padding: 7px 7px 7px 0.5em;
text-decoration: none;
width: tự động;
)

Sơ đô trang ul # người a.open (
background: # f3f1ed url (arrow_brown_d.gif) không có-lặp lại quyền;
color: # 6a2b04;
font-weight: bold;
)

Sơ đô trang ul # người người a.open (
background: # e3e0db url (arrow_brown_d.gif) không có-lặp lại quyền;
color: # 6a2b04;
font-weight: bold;
)

Sơ đô trang ul # người thì người a.open (
background: # dfdbd5 url (arrow_brown_d.gif) không có-lặp lại quyền;
color: # 6a2b04;
font-weight: bold;
)

Sơ đô trang ul # người người người người a.open (
background: # dfdbd5 url (arrow_brown_d.gif) không có-lặp lại quyền;
color: # 6a2b04;
font-weight: bold;
)

/ * Cấp độ thứ hai * /

Sơ đô trang ul # ul (
margin: 0 0 0 0;
padding: 0;
danh sách-style-type: none;
)

Sơ đô trang ul # người người (background: url (dot2.gif) không có-lặp lại;)

Sơ đô trang ul # người một người (
background: url (arrow_or_r.gif) 5px-không lặp lại # F3F1ED;
color: # 000;
font-weight: normal;
hiển thị: block;
padding: 7px 7px 7px 1.3em;
text-decoration: none;
width: tự động;
)

/ * Cấp độ thứ ba * /

Sơ đô trang ul # ul ul (
background: url (dot.gif) repeat-y 30px 0;
)

Sơ đô trang ul # người thì người (
background: url (dot2.gif) không lặp lại 30px ,5-em;
)

Sơ đô trang ul # người thì một người (
padding: .5 em 0 .5 em 2.5em;
background: url (arrow_or_r.gif) 18px-không lặp lại # F3F1ED;
)

/ * Cấp độ thứ tư * /

Sơ đô trang ul # ul ul ul (
background: url (dot.gif) repeat-y 60px 0;
)
Sơ đô trang ul # người người người người (
background: url (dot2.gif) không lặp lại-60px 0;
)
Sơ đô trang ul # người thì người một người (
padding: .5 em 0 .5 em 3.5em;
background: url (arrow_or_r.gif) 31px-không lặp lại # F3F1ED;
)
a: link (
color: # 000;
background-color: minh bạch;
)
a: hover (
color: # b64908;
)