关于LI，UL标签构造菜单

Nested lists used to create a simple folder metaphore

Russ Weakley
6-Jan-04

Here's a rough and ready example showing how to make a folder analalogy using a nested list.

• item 1
• item 2
• item 3

• item 4

  • sub-item 1
  • sub-item 2

  • sub-item 3

    • sub-sub-item 1
    • sub-sub-item 2

    • sub-sub-item 3

      • sub-sub-sub-item 1
      • sub-sub-sub-item 2
      • sub-sub-sub-item 3
      • sub-sub-sub-item 4
    • sub-sub-item 4
  • sub-item 4
• item 5
• item 6

HTML code

<ul id="sitemap">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#" class="open">item 4</a>
<ul>
<li><a href="#">sub-item 1</a></li>
<li><a href="#">sub-item 2</a></li>
<li><a href="#" class="open">sub-item 3</a>
<ul>
<li><a href="#">sub-sub-item 1</a></li>
<li><a href="#">sub-sub-item 2</a></li>
<li><a href="#" class="open">sub-sub-item 3</a>
<ul>
<li><a href="#">sub-sub-sub-item 1</a></li>
<li><a href="#">sub-sub-sub-item 2</a></li>
<li><a href="#">sub-sub-sub-item 3</a></li>
<li><a href="#">sub-sub-sub-item 4</a></li>
</ul>
</li>
<li><a href="#">sub-sub-item 4</a></li>
</ul>
</li>
<li><a href="#">sub-item 4</a></li>
</ul>
</li>
<li><a href="#">item 5</a></li>
<li><a href="#">item 6</a></li>
</ul>

CSS code

ul#sitemap
{
margin: 1em 0;
list-style-type: none;
background: url(dot.gif) repeat-y 3px 0;
padding: 0;
}

ul#sitemap li
{
margin-bottom: .5em;
}

ul#sitemap li a
{
background: url(bullet1.gif) no-repeat 0 .4em;
padding-left: 15px;
}

ul#sitemap li a.open, ul#sitemap li li a.open, ul#sitemap li li li a.open, ul#sitemap li li li li a.open
{
background-image: url(bullet2.gif);
}

/* second level */
ul#sitemap ul
{
margin: .5em 0 0 0;
padding: 0;
list-style-type: none;
}

ul#sitemap li li
{
background: url(dot2.gif) no-repeat 2px .5em;
}

ul#sitemap li li a
{
padding: 0 0 0 30px;
background: url(bullet1.gif) no-repeat 20px .3em;
}

/* third level */
ul#sitemap ul ul
{
background: url(dot.gif) repeat-y 30px 0;
}

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

ul#sitemap li li li a
{
padding: 0 0 0 60px;
background: url(bullet1.gif) no-repeat 50px .3em;
}

/* fourth level */
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 .5em;
}

ul#sitemap li li li li a
{
padding: 0 0 0 90px;
background: url(bullet1.gif) no-repeat 80px .3em;
}