CSS（層疊樣式表）是網(wǎng)頁開發(fā)中必不可少的一部分，它的作用是為 HTML（超文本標(biāo)記語言）文檔添加樣式和布局。其中，導(dǎo)航欄是網(wǎng)頁中常見的組件之一，下面我們來看一看如何用 CSS 開發(fā)導(dǎo)航欄。
首先，我們先來了解一下導(dǎo)航欄通常的結(jié)構(gòu)。一個簡單的導(dǎo)航欄通常包含一個 ul（無序列表）和若干個 li（列表項）元素，以及一些用于美化的 CSS 樣式。下面是一個簡單的 HTML 代碼示例：

<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產(chǎn)品</a></li>
<li><a href="#">服務(wù)</a></li>
<li><a href="#">關(guān)于</a></li>
</ul>

接下來是 CSS 樣式的部分。我們先設(shè)置導(dǎo)航欄的一般樣式，比如背景顏色、高度等等：

nav {
background-color: #333;
height: 50px;
line-height: 50px;
}
<br>
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
<br>
nav li {
float: left;
}
<br>
nav a {
display: block;
color: #fff;
text-align: center;
text-decoration: none;
padding: 0 15px;
}

這些樣式會給我們的導(dǎo)航欄設(shè)置一個統(tǒng)一的外觀，包括背景顏色、高度和列表項的布局等。接下來，我們需要為鼠標(biāo)懸停在導(dǎo)航欄上時的狀態(tài)添加一些樣式。為了做到這一點，我們需要添加以下 CSS 樣式：

nav a:hover {
background-color: #555;
}

這個樣式會在鼠標(biāo)懸停在導(dǎo)航欄上時，改變列表項的背景顏色，讓用戶知道自己正在懸停在該項上。
最后，我們還需要為當(dāng)前選中的頁面添加一些樣式。為了做到這一點，我們需要在 HTML 代碼中添加一個類，用于標(biāo)記當(dāng)前選中的頁面。比如：

<li class="active"><a href="#">首頁</a></li>

然后，我們可以在 CSS 文件中添加以下樣式：

nav .active a {
background-color: #555;
}

這個樣式會使得選中的頁面在導(dǎo)航欄上顯示為另外一種顏色，幫助用戶快速區(qū)分自己當(dāng)前所在的頁面。
這就是用 CSS 開發(fā)導(dǎo)航欄的基本方法。通過設(shè)置不同的樣式，我們可以定制出各種各樣的導(dǎo)航欄，滿足不同需求的網(wǎng)站設(shè)計。