树型列表的实现

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>树型列表的实现</title>

<!--

ul.tree, ul.tree ul {

list-style-type: none;

}

ul.tree, ul.tree ul {

list-style-type: none;

background: url(http://www.ximicc.com/attachments/month_0803/42008320133339.jpg) repeat-y;

margin: 0;

padding: 0;

}

ul.tree ul {

margin-left: 10px;

}

ul.tree li {

margin: 0;

padding: 0 12px;

}

ul.tree, ul.tree ul {

list-style-type: none;

background: url(http://www.ximicc.com/attachments/month_0803/42008320133339.jpg) repeat-y;

margin: 0;

padding: 0;

}

ul.tree ul {

margin-left: 10px;

}

ul.tree li {

margin: 0;

padding: 0 12px;

line-height: 20px;

background: url(http://www.ximicc.com/attachments/month_0803/n200832013377.jpg) no-repeat;

color: #369;

font-weight: bold;

}

ul.tree li.last {

background: #fff url(http://www.ximicc.com/attachments/month_0803/0200832013458.jpg) no-repeat;

}

-->

</style>

</head>

<body>

<li>Animals

<ul>

<li>Birds</li>

<li>Mammals

<ul>

<li>Elephant</li>

<li class="last">Mouse</li>

</ul>

</li>

<li class="last">Reptiles</li>

</ul>

</li>

<li class="last">Plants

<ul>

<li>Flowers

<ul>

<li class="last">Tulip</li>

</ul>

</li>

<li class="last">Trees</li>

</ul>

</li>

</ul>

</body>

</html>

原文来自：http://www.ximicc.com/article.asp?id=87