CSS中的下拉菜單是我們在網頁設計時經常需要用到的一種元素，特別是在移動端顯示時，自適應的下拉菜單更是必不可少。下面來介紹一下如何用CSS實現自適應的下拉菜單。

/* CSS代碼 */
nav {
background-color: #333;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
margin-left: 20px;
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
background-color: #333;
top: 100%;
left: 0;
padding: 0;
}
nav ul ul li {
margin: 0;
width: 100%;
}
nav ul ul a {
color: #fff;
display: block;
padding: 10px 20px;
text-decoration: none;
}

這是一個示例的CSS代碼，可以根據具體業務進行適當修改。下面來逐一介紹代碼中每個部分的作用：

nav：頂部導航欄的樣式，包含背景顏色、布局方式等。

nav ul：導航欄的第一層級菜單，使用flex布局方式，去掉列表樣式。

nav ul li：每個一級菜單的樣式，包含樣式間距、相對定位等。

nav ul li:hover >ul：當鼠標懸浮在一級菜單上時，二級菜單的樣式，將二級菜單的display屬性設置為block，使其顯示出來。

nav ul ul：二級菜單的樣式，包含背景顏色、定位等。

nav ul ul li：二級菜單中每個選項的樣式，去掉默認樣式，設置寬度為100%。

nav ul ul a：為二級菜單中的每個選項設置樣式，包括字體顏色、背景色、內邊距等。

以上是實現CSS自適應下拉菜單的一個示例。通過復制上述代碼并修改相應屬性和樣式，即可根據實際需求創建自己的下拉菜單。