CSS導航欄是網頁設計中非常重要的一部分。它是網頁的核心組成部分之一，能夠幫助用戶輕松地在頁面中導航。

.nav {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 60px;
background-color: #333;
}
.nav__button {
display: none;
}
.nav__list {
display: flex;
justify-content: center;
align-items: center;
}
.nav__item {
padding: 0 20px;
}
@media screen and (max-width: 768px) {
.nav__button {
display: block;
cursor: pointer;
background-color: #333;
color: #fff;
padding: 10px;
border: none;
font-size: 16px;
}
.nav__list {
display: none;
position: absolute;
top: 60px;
left: 0;
right: 0;
background-color: #333;
}
.nav__item {
width: 100%;
text-align: center;
padding: 10px;
border-bottom: 1px solid #fff;
}
.nav__item:last-child {
border-bottom: none;
}
.nav__list--active {
display: flex;
flex-direction: column;
}
}

使用上述CSS代碼可以實現一個簡單的導航欄。在移動設備上，導航欄會自動隱藏，并且會顯示一個按鈕。當用戶點擊按鈕時，導航欄會下拉并顯示出所有的菜單選項。