CSS導(dǎo)航欄是網(wǎng)頁設(shè)計中常用的一種元素，可以讓網(wǎng)頁更加美觀和易于導(dǎo)航。滾動的導(dǎo)航欄則可以讓用戶更方便地瀏覽網(wǎng)頁導(dǎo)航欄上的內(nèi)容。
下面是一個使用CSS實現(xiàn)導(dǎo)航欄滾動的例子：

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;
}
}

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