CSS 折疊菜單是網頁設計中比較重要的一個功能，它通常被用于實現網頁導航欄的展開和收起。

/* CSS樣式代碼 */
nav {
background-color: #f3f3f3;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
nav ul li a {
color: #333;
text-decoration: none;
padding: 5px 10px;
display: inline-block;
position: relative;
}
nav ul li ul {
display: none;
position: absolute;
top: 30px;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
}
nav ul li:hover ul {
display: block;
}

以上代碼中，我們用<nav>標簽包裹整個導航欄的 HTML 代碼，并定義了一個樣式類用于導航欄相關的樣式。

在導航欄的 HTML 代碼中，我們使用了<ul>和<li>標簽來創建無序列表，<li>標簽中的鏈接文字則通過<a>標簽來實現。其中，<li>標簽中也可以包含子菜單，子菜單同樣采用無序列表和鏈接文字實現。

在 CSS 樣式代碼中，我們定義了導航欄的背景顏色、內邊距，以及列表樣式。導航鏈接文字的樣式包括字體顏色、文本裝飾和內邊距等。

我們還定義了子菜單的樣式，將其設置為絕對定位，并在鼠標懸浮于父菜單上時顯示。

在實際使用時，我們只需要在 HTML 代碼中按照上述示例添加鏈接和子菜單，然后在 CSS 文件中添加樣式即可輕松實現折疊菜單效果。