CSS是前端開發中非常重要的部分，其中網站導航是與用戶交互最為密切的，因此通過CSS構建一個好看的網站導航非常有必要。

.nav{
display:flex;
justify-content:space-between;
align-items:center;
background-color:#f5f5f5;
height:50px;
padding:0 30px;
}
.nav li{
list-style:none;
}
.nav a{
text-decoration:none;
color:#333;
font-size:16px;
margin:0 10px;
transition:color 0.3s ease;
}
.nav a:hover{
color:#ff6600;
}

以上是一個比較基本的網站導航的CSS代碼，其中利用了flex布局對導航進行了排版，并設置了背景色和高度，使導航更加醒目并且易于辨認。同時使用了文字顏色的漸變效果，增加了用戶與網站之間的交互性。

另外，如果想要使導航更加時尚，也可以通過CSS設置漸變背景色、陰影效果、字體動畫等效果，使網站導航更加優雅。但需要注意的是，這些效果不宜過多，以免干擾用戶體驗。

.nav{
display:flex;
justify-content:space-between;
align-items:center;
background:linear-gradient(to right,#74ebd5,#ACB6E5);
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
height:70px;
padding:0 30px;
}
.nav a{
text-decoration:none;
color:white;
font-size:20px;
margin:0 10px;
transition:color 0.3s ease;
}
.nav a:hover{
color:#ff6600;
animation: shake 0.5s;
-webkit-animation: shake 0.5s;
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-5px);
}
20%, 40%, 60%, 80% {
transform: translateX(5px);
}
}
@-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-5px);
}
20%, 40%, 60%, 80% {
-webkit-transform: translateX(5px);
}
}

在以上代碼中，利用了線性漸變的背景、陰影、字體動畫等特效，使導航更加時尚，而字體動畫使用戶與網站之間的交互增加，更具吸引力。但同時也需要注意，特效不宜過多，以免過于花哨。

在編寫CSS時，還需要注意瀏覽器兼容性和頁面響應式設計，以免特效無法顯示或在不同的設備上顯示不正常。