導航欄是網頁設計中必不可少的元素之一，而自定義導航欄的 CSS 樣式則可以使網站更具個性化和美觀性。下面將簡要介紹如何自定義 CSS 樣式以優化導航欄。 我們可以使用“ul”和“li”標簽創建一個簡單的導航欄。首先，在 HTML 文件中定義一個“ul”列表，其中包含每個導航鏈接作為“li”項：

<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

我們可以使用以下 CSS 樣式來更改導航欄的外觀：

.nav {
list-style: none;
background-color: #333;
text-align: center;
margin: 0;
padding: 0;
}
.nav li {
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}

從上面的樣式中，我們可以看到，“ul”的定義樣式移除了列表默認樣式，設定了導航欄的背景色和文字居中。下一級元素“li”的定義樣式設置了導航欄每個鏈接的高度和寬度并添加了底部邊框作為分隔符。鏈接的樣式通過“a”元素的樣式進行定義，并添加了背景顏色的過渡效果。 最后，我們可以將樣式表鏈接到 HTML 文件，這樣就可以實現導航欄樣式的優化。 總之，自定義導航欄的樣式是網站設計中很重要的一部分。通過使用 CSS 樣式和 HTML 元素，我們可以為導航欄創建不同的外觀效果，以吸引和留住用戶。