当网页需要展示大量数据时，常常会用到列表来呈现。但是当列表项过多时，页面会显得杂乱无序。这时候，我们可以使用CSS来隐藏列表，并在点击时展开。

/* 将所有列表项的display属性设置为none */
ul li {
display: none;
}
/* 给列表项前面添加一个加号以表示可以展开 */
ul li:before {
content: "+";
display: inline-block;
margin-right: 5px;
}
/* 点击加号时展开列表项 */
ul li.expand {
display: block;
}
/* 点击加号时将加号改为减号 */
ul li.expand:before {
content: "-";
}

以上代码将ul中的所有li的display属性设置为none，也就是隐藏了所有列表项。然后使用:before伪元素在每个列表项前面添加一个加号，表示可以展开。当用户点击加号时，我们使用JavaScript将该列表项的class设置为expand，将display属性设置为block，让其展开。同时将加号改为减号以表示可以收缩。

这样的效果看起来简单却实用，在网页中可以使用在导航栏、下拉菜单、信息展示等场合。需要注意的是，这个效果不支持低版本浏览器，推荐在现代浏览器中使用。