CSS展開列表是一種常見的網(wǎng)頁設計元素，它能為用戶提供方便的導航和信息展示。在這篇文章中，我們將會學習如何使用CSS實現(xiàn)一個簡單的展開列表。

/* 定義基本樣式 */
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding: 12px;
background-color: #f1f1f1;
border: 1px solid #ccc;
cursor: pointer;
}
/* 鼠標移動到列表項上面時改變背景顏色 */
li:hover {
background-color: #e2e2e2;
}
/* 定義展開或閉合狀態(tài)的樣式 */
li.hasChildren:before {
content: '+';
display: inline-block;
margin-right: 6px;
font-weight: bold;
}
li.open:before {
content: '-';
}
/* 定義子列表的樣式 */
ul.sublist {
display: none;
margin-left: 18px;
}
/* 當鼠標點擊列表項時切換展開或閉合狀態(tài) */
li.hasChildren.open ul.sublist {
display: block;
}

以上代碼定義了列表項的基本樣式和展開或閉合狀態(tài)的樣式。使用:before偽類在列表項前加上+或-符號，表示列表項是否展開。每個含有子列表的列表項則添加class為hasChildren，每個展開的子列表項則添加class為open。

另外，代碼中使用了display:none將子列表隱藏，當點擊含有子列表的列表項時，將其對應的子列表設為display:block來顯示子列表。

總之，使用這些簡單的CSS代碼就能輕松實現(xiàn)一個展開列表，為用戶提供更好的瀏覽體驗。