導航欄是網站的重要組成部分之一。本文將介紹如何通過使用CSS來美化導航欄。

/* CSS代碼開始 */
nav {
background-color: #333;  /* 背景顏色設置為黑色 */
overflow: hidden;
}
nav a {
float: left;  /* 設置為左浮動 */
color: #f2f2f2;  /* 字體顏色為白色 */
text-align: center;  /* 居中顯示 */
padding: 14px 16px;  /* 上下左右的內邊距都設置為14像素 */
text-decoration: none;  /* 取消下劃線 */
}
nav a:hover {
background-color: #ddd;  /* 鼠標移到鏈接上時，背景顏色變為淡灰色 */
color: black;  /* 字體顏色變為黑色 */
}
/* CSS代碼結束 */

以上代碼中，nav標簽用來包裹導航欄部分。通過設置背景顏色和overflow屬性，使導航欄保持黑色背景并自動隱藏內容溢出部分。

而a標簽則用來表示導航鏈接。通過設置浮動、內邊距、文本對齊以及文本裝飾等屬性，美化導航鏈接的顯示效果。鼠標覆蓋樣式由a:hover實現。

最終實現的效果是：鼠標覆蓋到鏈接上時，背景色變淺，字體顏色變成黑色。整個導航欄整潔美觀，易于使用。