隨著移動設備的普及，越來越多的網站需要適配移動端。而移動端適配的重要一環就是移動端菜單的設計。
在CSS3里，有一些新特性可以讓我們更方便地設計移動端菜單，讓用戶在移動設備上更友好地使用網站。

代碼示例：
/* 為移動端菜單添加樣式 */
@media screen and (max-width: 600px) {
.mobile-menu {
display: none;
width: 100%;
text-align: center;
background-color: #f8f8f8;
position: fixed;
top: 50px;
left: 0;
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease;
}
.mobile-menu.open {
display: block;
opacity: 1;
}
.mobile-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-menu li {
margin: 10px 0;
}
.mobile-menu a {
font-size: 18px;
color: #000;
text-decoration: none;
}
.mobile-menu a:hover {
color: #f00;
}
}

以上是一個簡單的移動端菜單的CSS樣式代碼。
其中，通過@media查詢判斷屏幕寬度是否小于600px，并為移動端菜單添加樣式。
.mobile-menu是移動端菜單的類名，其中包含了一些基本樣式：
display:none，在默認狀態下該菜單不顯示；
position:fixed，使菜單始終固定在頁面上；
top:50px，為了不與瀏覽器默認的地址欄重疊，將菜單顯示在距頁面頂部50px的位置；
opacity:0，初始時菜單是透明的；
transition:opacity 0.3s ease，菜單顯示和隱藏時有漸變效果。

隨著對移動設備的使用量增加，移動端的設計越來越重要。通過CSS3的新特性，我們可以更方便地設計移動端菜單，并提升用戶使用的體驗。