CSS代碼導航欄是現代網站設計的一個重要組成部分。通過使用CSS代碼創建導航欄，可以使網站看起來更加現代化、美觀，并且提高用戶體驗。下面是一些CSS代碼導航欄的示例，你可以使用它們來構建自己的網站導航欄。

/* 1. 簡單的橫向導航欄 */
.nav {
display: flex;
justify-content: space-between;
}
/* 2. 帶有下劃線的橫向導航欄 */
.nav {
display: flex;
justify-content: space-between;
}
.nav li {
position: relative;
}
.nav li a {
padding-bottom: 5px;
}
.nav li a::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #000;
position: absolute;
left: 0;
bottom: 0;
transition: width .3s ease-in-out;
}
.nav li a:hover::after {
width: 100%;
}
/* 3. 豎向導航欄 */
.nav {
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* 4. 帶有下拉菜單的橫向導航欄 */
.nav {
display: flex;
justify-content: space-between;
}
.nav li {
position: relative;
}
.nav li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
}
.nav li:hover ul {
display: block;
}
/* 5. 無序列表導航欄 */
.nav {
list-style: none;
display: flex;
justify-content: space-between;
}
/* 6. 帶有圖標的橫向導航欄 */
.nav li {
display: flex;
align-items: center;
margin-right: 20px;
}
.nav li:last-child {
margin-right: 0;
}
.nav li a {
display: flex;
align-items: center;
}
.nav li a i {
margin-right: 5px;
}

以上是幾個常見的CSS代碼導航欄示例，你可以在這些示例的基礎上進行修改，實現適合自己網站的導航欄效果。同時，CSS代碼導航欄的實現方式也有很多種，你可以根據自己的需要進行選擇，最終創造出漂亮的網站導航欄。