下拉菜單是網頁設計中非常常見的元素之一，它可以幫助用戶快速地選擇需要的選項。但是，在一些情況下，我們希望下拉菜單能夠在用戶選擇完選項后自動回收起來，以便更好地利用頁面空間。以下介紹一些使用 CSS 實現讓下拉菜單回收的方法。

1. 使用 “:hover” 偽類

.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content {
display: none;
}

在這個示例中，我們首先設置下拉菜單的默認狀態為不顯示（display: none）。之后，我們使用 CSS 選擇器將菜單項的容器與鼠標懸停事件（:hover）相結合。當用戶將鼠標懸停在下拉菜單的觸發器（.dropdown）上時，菜單項的容器（.dropdown-content）將被顯示（display: block）。

2. 使用 “:target” 偽類

.dropdown:target .dropdown-content {
display: block;
}
.dropdown-content {
display: none;
}

這種方法使用 CSS 偽類 “:target” 來檢測 URL 中的錨點，并根據錨點的值改變頁面上元素的狀態。在這個例子中，我們使用 “:target” 偽類來檢測頁面中是否存在名為 “dropdown” 的錨點，并且當錨點被調用時，我們將菜單項的容器顯示出來。

3. 使用 JavaScript

var dropdown = document.querySelector(".dropdown");
var dropdownContent = document.querySelector(".dropdown-content");
dropdown.addEventListener("click", function() {
dropdownContent.classList.toggle("show");
});

最后，我們可以使用 JavaScript 來控制下拉菜單的狀態。在這個例子中，我們首先獲取觸發器和菜單項的容器對象，然后將點擊事件添加到觸發器上。在點擊事件中，我們使用 “classList.toggle” 方法將菜單項容器的 “show” 類名開關打開或關閉，以實現顯示或隱藏菜單項容器。