CSS ul 折疊是一種常用的技術，它可以讓我們在頁面中展示多層級菜單，同時能夠控制每個級別的菜單的可見性。下面我們就來看一下如何使用CSS實現ul折疊效果。

/* 加載CSS文件 */
<link rel="stylesheet" href="style.css">
/* 定義ul列表樣式 */
ul.collapse {
list-style: none;
margin: 0;
padding: 0;
}
/* 定義折疊菜單樣式 */
ul.collapse li {
padding: 10px 0;
}
/* 定義展開菜單樣式 */
ul.collapse li ul {
display: none;
}
/* 每個展開項前的樣式 */
ul.collapse li.expand:before {
content: "-";
margin-right: 10px;
}
/* 使用JavaScript控制折疊 */
$('ul.collapse li.expand').on('click', function() {
$(this).toggleClass('collapse').children('ul').slideToggle(200);
})

在上面的代碼中，我們先定義了ul列表的樣式，然后對于每個菜單項設置了padding，除了最頂層級別的菜單項外，其他所有子菜單默認是隱藏的（display: none）。在每個菜單項前加上一個“-”號，這個選項默認是展開的。

當用戶點擊一個展開的菜單項時，我們在JavaScript中切換該菜單項的折疊狀態，同時通過slideToggle（）方法來切換菜單的顯示和隱藏，以實現菜單的折疊和展開。

通過使用CSS ul 折疊技術，我們可以輕松地在頁面中展示多級菜單，并且可以使用JavaScript來控制菜單的折疊和展開狀態。