CSS無序列表折疊是一種很實用的技術，尤其是當我們需要在網頁上展示大量的列表時。通過折疊，我們可以更好地組織信息，并幫助用戶更快地找到他們需要的內容。
一、如何實現CSS無序列表折疊
在實現CSS無序列表折疊之前，我們先看一下HTML中無序列表的結構。

<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>

在使用CSS折疊無序列表時，我們通常會為每個列表項添加一個按鈕，點擊按鈕就能展開或折疊其子列表。下面是實現折疊的CSS代碼。

ul {
list-style: none;
padding: 0;
}
li {
margin: 5px 0;
}
li > ul {
display: none;
}
li > button {
margin-left: 10px;
}
li > button:focus + ul {
display: block;
}

以上代碼中，我們首先將無序列表的默認樣式去掉，并設置了列表項的一些基本樣式。然后，我們將隱藏所有子列表，再為每個列表項添加一個按鈕，并為按鈕添加了一個:focus偽類。最后，我們使用CSS選擇器和+符號來控制子列表的展開和折疊。
二、如何修改樣式
如果您想改變按鈕和子列表的樣式，可以使用以下CSS代碼。

li > button {
border: none;
background-color: #f0f0f0;
padding: 5px 10px;
border-radius: 5px;
}
li > ul {
margin-left: 20px;
}

在以上代碼中，我們為按鈕添加了圓角邊框、背景顏色和一些內邊距，使其看起來更美觀。我們還通過margin-left屬性調整了子列表的位置。
三、總結
通過CSS無序列表折疊，我們可以更好地展示網頁上的信息，使用戶更快地找到他們需要的內容。通過簡單的CSS代碼，我們就可以實現折疊效果，并自定義樣式來匹配網頁風格。