CSS是一种用于网页设计的语言。它可以帮助我们美化网页，让网页更加美观、易读、易用等。当我们需要在网页中呈现出树形结构的时候，CSS 是一个非常好的选择，它可以轻松实现此目的。

/* 定义基本样式 */
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
/* 定义子元素样式 */
li {
position: relative;
padding-left: 20px;
line-height: 20px;
}
/* 定义子元素前面的小图标 */
li:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 10px;
height: 10px;
border: 1px solid #000;
border-radius: 50%;
}
/* 定义子元素的子元素样式 */
li li {
padding-left: 40px;
}
/* 定义最后一个子元素的样式 */
li:last-child {
margin-bottom: 0;
}
/* 定义子元素展开与收缩的样式 */
li.has-child:before {
content: "+";
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
li.has-child.collapsed:before {
content: "-";
}
/* 子元素的状态 */
li > ul {
display: none;
}
li.expanded > ul {
display: block;
}

上面的代码中，我们首先定义了一个 ul，去掉了样式中的默认列表标记，在子元素使用一些内边距和行高。接下来，我们又为每个 li 定义了一个前置元素，样式先默认显示一个用于标识元素的小圆形图标，当展开子元素时，将使用另外一个图标。最后，我们还定义了展开和收缩功能，这是通过添加一些 JavaScript 代码来实现的。

使用上面的 CSS 代码，我们可以很容易地创建一个树形结构的菜单或列表，这可以帮助访问者更快地定位他们所需要的信息。