CSS導航欄可以讓網站更加美觀和易于導航。以下是如何創建一個簡單的導航欄的步驟。

/*HTML代碼*/
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</nav>
/*CSS代碼*/
nav {
background-color: #333;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}

第一步是創建一個 HTML 導航元素。我們使用<nav>元素創建導航欄。在<nav>中，我們有一個未排序列表 (<ul>)，該列表包含了我們導航的所有鏈接，每個連接用一個列表項 (<li>) 來表示。

在 CSS 中，我們首先為導航欄設置背景色。接下來，我們樣式化我們的未排序列表。我們去掉了默認的列表樣式，將margin和padding設為 0，以取消列表項與父元素之間的空白。狀態浮動的列表項之后，我們將其鏈接屬性設置為塊級元素，并設置其他樣式，例如文字顏色、文本居中、內邊距等。

最后，我們添加鼠標滑過狀態。當鼠標懸停在鏈接上時，我們改變了鏈接的背景顏色。