CSS中的下拉菜單是一種非常常見的用戶交互方式，在網頁設計中也使用得非常廣泛。當鼠標放在菜單按鈕上時，菜單會自動下拉，展示更多的選項。我們可以通過CSS來實現這種交互效果。

/*首先，我們需要創建一個菜單按鈕，這里我們以一個按鈕div為例 */
.button{
/*設置按鈕樣式*/
background-color: #f0f0f0;
color: #333;
display: inline-block;
padding: 8px 16px;
font-size: 16px;
/*添加hover效果*/
transition: background-color 0.3s ease;
}
.button:hover{
background-color: #ddd;
}
/* 接下來，我們創建下拉菜單的容器*/
.dropdown{
position: relative;
display: inline-block;
}
/* 下拉菜單的選項*/
.dropdown-content{
display: none;
position: absolute;
z-index: 1;
/*菜單樣式*/
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
/* 當鼠標放上去時，下拉菜單會顯示*/
.dropdown:hover .dropdown-content{
display: block;
}

上面的代碼中，我們首先創建了一個button的類，用于定義菜單按鈕的樣式。接下來，我們創建了一個.dropdown的容器類，用于容納下拉菜單。我們設定了.cursor-pointer { cursor:pointer; } 這個類為了讓我們的鼠標變成小手。 然后，我們創建了.dropdown-content的類，用于定義下拉菜單的樣式，將其display屬性設置為none，表示一開始不會顯示。

接著，我們添加了一個:hover偽類選擇器，當鼠標放到.dropdown容器上時，.dropdown-content類將被顯示，從而實現了下拉菜單的效果。

通過這種方式，我們就可以輕松地為網站添加下拉菜單了。當然，實際開發中還需要根據具體需求進行一些定制。例如，在下拉菜單中插入圖標、使用不同顏色主題等等。