CSS自適應菜單指的是根據不同設備或瀏覽器的屏幕大小和方向自動調整菜單的樣式和布局，以便更好地適應用戶的視覺體驗。要實現這一功能，我們可以使用媒體查詢和Flexbox布局。

首先，我們需要在HTML中創建一個菜單的結構。例如：

<nav class="menu">
<ul class="menu-list">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

接下來，我們需要在CSS中為這個菜單設置基本樣式，并使用Flexbox布局來控制菜單項的排列方式。例如：

.menu {
display: flex;
justify-content: center;
align-items: center;
}
.menu-list {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.menu-list li {
margin: 0 10px;
}
.menu-list li:first-child {
margin-left: 0;
}
.menu-list li:last-child {
margin-right: 0;
}

現在，我們需要根據屏幕大小和方向來設置菜單的響應式布局。例如：

@media (max-width: 767px) {
.menu {
flex-direction: column;
}
.menu-list {
flex-direction: column;
}
.menu-list li {
margin: 10px 0;
}
.menu-list li:first-child {
margin-top: 0;
}
.menu-list li:last-child {
margin-bottom: 0;
}
}

在上面的代碼中，我們使用@media查詢來檢測屏幕寬度是否小于767像素。如果是，我們就將菜單和菜單項的flex-direction屬性設置為“column”，這樣菜單項就會上下排列。我們還將菜單項之間的margin屬性改為縱向間距，并將第一項的上邊距和最后一項的下邊距設置為0，以便創建一個清晰的響應式布局。

使用以上步驟，我們就可以輕松地創建一個CSS自適應菜單，從而為用戶創造更好的瀏覽體驗。