CSS是一種常用的網頁樣式編寫語言，通過它我們可以對網頁的排版、樣式等進行調整。其中，導航欄是網頁設計中一個重要的組成部分，它可以幫助用戶快速瀏覽網站中的內容。下面我們就來看一下如何利用CSS來制作一個簡單的導航欄。

<ul id="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">產品介紹</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
#nav {
list-style: none;
margin: 0;
padding: 0;
background-color: #333;
}
#nav li {
display: inline-block;
margin-right: 20px;
}
#nav li a {
display: block;
color: #fff;
text-decoration: none;
padding: 10px 20px;
}
#nav li a:hover {
background-color: #555;
}

此處，我們使用了一個無序列表（<ul>）來包含導航欄的所有元素。每個導航欄選項都是一個列表項（<li>），并且包含一個鏈接（<a>）。CSS樣式中，我們對<ul>和<li>分別進行了樣式調整，如將列表樣式設為none，將背景顏色設為#333等，其余的樣式設置都是為了美觀和交互效果。

最后，我們使用偽類:hover來給導航欄選項增加了當鼠標懸浮時的交互效果，使得網頁更加生動和有趣。