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

<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">服務</a></li>
<li><a href="#">關于</a></li>
</ul>

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

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;
}

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

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

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

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

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

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

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