CSS二級伸縮菜單是一個很有用的功能，可以在網頁中創建更好的導航體驗。本文將介紹如何實現一個簡單的伸縮菜單。

首先，我們需要使用HTML創建菜單結構。以下是一個基本的示例：

<ul class="menu"><li><a href="#">菜單1</a><ul><li><a href="#">子菜單1.1</a></li><li><a href="#">子菜單1.2</a></li></ul></li><li><a href="#">菜單2</a><ul><li><a href="#">子菜單2.1</a></li><li><a href="#">子菜單2.2</a></li></ul></li></ul>

上面的HTML創建了一個包含兩個菜單的導航欄。每個菜單中都包含一個子菜單。接下來，我們可以使用CSS來使這些菜單顯示為伸縮菜單：

.menu ul {
display: none;
}
.menu li:hover ul {
display: block;
}

上面的CSS代碼使用display屬性來隱藏菜單。當鼠標懸停在菜單上時，display屬性會被設置為block，從而顯示子菜單。

如果我們想要使菜單更加交互，我們還可以使用一些動畫效果。以下是一個使用transition屬性來創建菜單漸變效果的示例：

.menu li ul {
opacity: 0;
transition: opacity 0.5s ease;
}
.menu li:hover ul {
opacity: 1;
}

上面的代碼會在子菜單中添加一個漸變效果。當鼠標懸停在菜單上時，子菜單的opacity屬性會從0逐漸變為1，從而創建一個漸變效果。

以上是一個簡單的CSS二級伸縮菜單示例。通過使用HTML結構和CSS樣式，我們可以創建出更具交互性和可視性的導航欄。