CSS是一種可以讓網頁變得更加美觀的語言，它可以讓我們實現很多好看的效果。其中一個常見的效果就是讓導航可以上下滾動。那么今天我們就來學習一下如何使用CSS來實現這個效果。

/* 首先，我們需要先定義一個div來包含我們的導航菜單 */
<div class="nav">
<ul>
<li><a href="#">導航一</a></li>
<li><a href="#">導航二</a></li>
<li><a href="#">導航三</a></li>
<li><a href="#">導航四</a></li>
<li><a href="#">導航五</a></li>
</ul>
</div>
/* 接著，我們需要為我們的導航菜單添加一些基礎的樣式 */
.nav {
height: 50px; /* 設置導航菜單的高度 */
overflow-y: scroll; /* 設置菜單內容超出高度時出現縱向滾動條 */
background-color: #fff; /* 設置背景顏色為白色 */
margin-bottom: 20px; /* 設置底部外邊距為20px，避免其他元素和導航重疊 */
}
.nav ul {
list-style: none; /* 去掉ul默認的樣式 */
margin: 0; /* 去掉ul的左右內邊距 */
padding: 0; /* 去掉ul的上下內邊距 */
width: 100%; /* 設置ul的寬度占滿父元素的寬度 */
}
.nav li {
float: left; /* 設置li浮動，讓它們能水平排列 */
}
.nav a {
display: block; /* 將a標簽變成塊級元素 */
padding: 0 20px; /* 給a標簽設置左右內邊距，使之變寬 */
text-decoration: none; /* 去掉a標簽的下劃線 */
color: #333; /* 設置a標簽字體顏色為黑色 */
line-height: 50px; /* 設置a標簽的行高等于導航菜單的高度，使之居中顯示 */
}

上面的代碼是我們實現基礎樣式的代碼，接下來我們需要為導航菜單添加一些交互效果，使之能夠滾動。

/* 給我們的ul添加一個動畫，使之在2s內滾動到最底部 */
.nav ul {
animation: scroll 2s ease-in-out infinite;
}
/* 定義scroll動畫 */
@keyframes scroll {
0% {
transform: translateY(0);
}
50% {
transform: translateY(0);
}
100% {
transform: translateY(calc(-100% + 50px));
}
}

上面的代碼中，我們使用了CSS動畫的特性，讓ul元素在兩秒內無限循環滾動。同時，我們在動畫的最后定義了一個transform屬性，將ul元素的位置設置到最后一個導航菜單的位置，使之看起來像是一個無限滾動的菜單。

使用上述代碼，我們就可以輕松的實現讓導航菜單可以上下滾動的效果了。當然，上述代碼只是一個基礎的實現，你可以根據自己的需求進一步調整樣式和動畫效果，或者加入JavaScript等其他技術實現更加高級的效果。