CSS導航欄是網頁設計中常用的一種元素，可以讓網頁更加美觀和易于導航。滾動的導航欄則可以讓用戶更方便地瀏覽網頁導航欄上的內容。
下面是一個使用CSS實現導航欄滾動的例子：

nav {
overflow: auto;
}
<br>
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
<br>
li {
flex: 1 0 auto;
}
<br>
a {
display: block;
padding: 1em;
text-align: center;
text-decoration: none;
}
<br>
@media screen and (min-width: 40em) {
nav {
height: 2.5em;
position: relative;
}
<br>
  ul {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
<br>
  li {
flex: none;
}
<br>
  a {
padding: 0.5em 1em;
}
<br>
  ul:focus-within {
overflow: auto;
}
}

代碼中，首先定義了導航欄的樣式。nav元素設置overflow為auto，表示當導航欄超過容器寬度時會出現滾動條。ul元素使用了flex布局，并且設置了list-style、margin和padding等樣式。li元素使用了flex布局，并且設置了flex屬性為1 0 auto，表示項目在空間剩余空間時使用自動填充，縮小阻力設為0，基礎大小為auto。a元素設置了display為block，表示顯示為塊級元素，并使用了padding、text-align和text-decoration等樣式。
媒體查詢@media screen and (min-width: 40em)表示當屏幕寬度大于等于40em時執行下面的代碼。代碼中，設置了nav元素的高度和position，并將ul元素設置為絕對定位，并使用了overflow:hidden。li元素取消了flex布局的設置，使用了flex:none。a元素的padding也作了相應調整。ul:focus-within表示當ul元素獲得焦點時，顯示滾動條。
使用上述代碼，可以輕松實現一個CSS導航欄滾動效果，提高網站的用戶體驗。