下拉菜單是網頁設計中常見的一種交互式組件。通過 CSS 動畫，在用戶對菜單進行操作時，可以增強用戶的交互體驗。下面，我們來學一下如何使用 CSS 動畫來實現下拉菜單。

/*CSS*/
.menu-wrapper {
position: relative;
}
.menu {
display: none;
position: absolute;
top: 30px;
left: 0;
z-index: 999;
}
.menu.active {
display: block;
animation: fadeInDown .2s ease-in;
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translate3d(0, -10%, 0)
}
to {
opacity: 1;
transform: none;
}
}

代碼解釋：

1、首先我們需要定義一個菜單容器，即 menu-wrapper。

2、在容器中定義一個菜單，即 menu，用于顯示下拉菜單。

3、定義菜單容器的定位方式為相對定位，菜單的定位方式為絕對定位，并將菜單定位在菜單容器的下方。

4、初始化時，菜單的顯示狀態應該為隱藏，即 display: none。

5、定義菜單的顯示狀態，即當菜單的 class 屬性為 active 時，將菜單設置為可見，并應用 CSS 動畫效果，具體動畫效果的實現可以用 @keyframes 和 animation 來定義。

注意：菜單容器的 z-index 值應該設置為一個較高的值，以確保菜單可以覆蓋在其他元素之上。

最后，通過 JavaScript 來實現點擊按鈕顯示或隱藏菜單。