CSS中移動菜單欄是現代網站設計中的一個常見需求。當網站的屏幕尺寸縮小時，菜單欄通常變成一個下拉列表，以便在有限的屏幕空間內容納更多的內容。本文將介紹如何使用CSS來實現這樣的移動菜單欄。

/* CSS代碼 */
/* 隱藏原始菜單欄 */
.primary-menu {
display: none;
}
/* 顯示移動菜單欄按鈕 */
.mobile-menu-toggle {
display: block;
}
/* 移動菜單欄樣式 */
.mobile-menu {
display: none;
position: absolute;
top: 50px;
left: 0;
right: 0;
z-index: 9999;
background-color: #fff;
padding: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
/* 更多樣式可以根據需求自行添加 */
}
/* 移動菜單欄中的列表項樣式 */
.mobile-menu li {
display: block;
margin-bottom: 10px;
}
/* 移動菜單欄中的鏈接樣式 */
.mobile-menu a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
border-radius: 3px;
}
/* 移動菜單欄按鈕樣式 */
.mobile-menu-toggle {
display: none;
/* 更多樣式可以根據需求自行添加 */
}
/* 移動菜單欄按鈕激活狀態樣式 */
.mobile-menu-toggle.active {
/* 更多樣式可以根據需求自行添加 */
}
/* 響應式設計 */
@media (max-width: 768px) {
/* 顯示移動菜單欄按鈕 */
.mobile-menu-toggle {
display: block;
}
/* 隱藏原始菜單欄 */
.primary-menu {
display: none;
}
/* 顯示移動菜單欄 */
.mobile-menu {
display: block;
}
}

上面的代碼中，我們首先隱藏了原始菜單欄，并在屏幕尺寸較小時顯示了移動菜單欄按鈕。移動菜單欄的樣式通過.mobile-menu類來定義，其中包含了菜單欄的位置、背景顏色、陰影效果和列表項樣式等屬性。通過@media查詢來響應式地改變菜單欄的顯示方式。