自適應菜單是一種應用于網站和應用程序的常見界面元素。它們可以讓用戶輕松地從一個頁面或功能轉到另一個頁面或功能，以及直接訪問子菜單。這些菜單可以被嵌入在固定的導航欄、移動端菜單欄或自定義操作中。

使用CSS，我們可以輕松地創建自適應菜單。通過使用@media媒體查詢和CSS偽類選擇器，自適應菜單可以在不同的屏幕大小或設備上適應不同的樣式。以下是一個基本的CSS代碼示例：

@media only screen and (max-width: 600px) {
/*小屏幕適用的樣式*/
}
@media only screen and (min-width: 601px) and (max-width: 1024px) {
/*中等屏幕適用的樣式*/
}
@media only screen and (min-width: 1025px) {
/*大屏幕適用的樣式*/
}
/*鼠標懸浮在菜單選項上時的樣式*/
.menu-item:hover {
background-color: #ccc;
color: #333;
}
/*當前頁面選中的菜單選項的樣式*/
.current-menu-item {
font-weight: bold;
}

在上面的示例代碼中，我們使用@media媒體查詢來識別不同屏幕大小和設備，并應用相應的CSS樣式。此外，我們還使用CSS偽類選擇器來表現鼠標懸浮在菜單選項上時的樣式以及當前頁面選中的菜單選項的樣式。您可以根據實際需求調整這些樣式。

最后，自適應菜單使用一些JavaScript也可以使用戶交互更友好。例如，當用戶點擊一個菜單選項時，該選項應該展開相應的子菜單。通過使用jQuery等JavaScript庫，可以輕松地實現這一目的。