在現代網站設計中，導航欄是一種非常重要的元素，它不僅在視覺上對網站進行導航，而且還能夠在用戶體驗方面提供很大的幫助。要讓你的導航欄在視覺上能夠吸引人，我們現在提供了一些css酷炫導航的代碼。

/* Nav CSS */ 
.nav{
width: 100%;
float:left;
margin:0;
padding:0;
list-style:none;
font-weight:bold;
font-size:15px;
text-align:center;
background-color:#333;
}
.nav li{
float:left;
margin-top:0;
margin-right:10px;
position:relative;
}
.nav a{
display:block;
padding:8px 15px;
color:#FFF;
border-top:1px solid #2980b9;
border-bottom:1px solid #3e3e3e;
text-decoration:none;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.4);
position:relative;
}
.nav a:hover, .nav li:hover >a{
color:#FFF;
border-top:1px solid #303030;
border-bottom:1px solid #444;
background-color:#333;
background-image:-webkit-gradient(linear, left top, left bottom, from(#444), to(#333));  
background-image:-webkit-linear-gradient(top, #444, #333);  
background-image:-moz-linear-gradient(top, #444, #333);  
background-image:-ms-linear-gradient(top, #444, #333);  
background-image:-o-linear-gradient(top, #444, #333);  
background-image:linear-gradient(top, #444, #333);  
}
/* Dropdown Nav */ 
.nav ul{
list-style:none;
position:absolute;
left:-9999px;
z-index:9999;
box-shadow:0 0 15px rgba(0, 0, 0, 0.4);
-webkit-opacity:0;
-moz-opacity:0;
opacity:0;
-webkit-transition:0.2s ease-out;
-moz-transition:0.2s ease-out;
-o-transition:0.2s ease-out;
transition:0.2s ease-out;
}
.nav li:hover ul{
left:0;
-webkit-opacity:1;
-moz-opacity:1;
opacity:1;
}
.nav ul li{
list-style:none;
display:block;
float:none;
margin:0;
padding:0;
}
.nav ul a{
padding:10px;
color:#333;
background-color:#FFF;
text-decoration:none;
width:100%;
height:auto;
display:inline-block;
border-bottom:1px solid #eee;
}
.nav ul a:hover, .nav ul li:hover >a{
background-color:#f3f3f3;
box-shadow:0 0 5px rgba(0, 0, 0, 0.1);
}
.nav ul li:first-child >a{
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.nav ul li:last-child >a{
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.nav ul ul{
margin-left:100%;
top:0;
}
.nav ul li:hover >ul{
left:100%;
top:0;
}

在這個代碼段中，我們可以看到一些非?；镜腃SS樣式，如顏色和邊框。但是，通過鼠標懸停時的樣式更改以及下拉菜單的實現，這些樣式的可讀性得到了改善，并將以前單調的導航欄轉變為酷炫的導航欄。

雖然這段代碼包含了基礎樣式的代碼，但你可以自由地使用你自己的CSS創建導航欄。只需要使用這個代碼片段為你的項目建立一個起點，就可以開始創建自己的導航欄。