CSS 導航菜單是網站設計中最常見的元素之一。通過導航菜單，用戶可以輕松地瀏覽網站的不同部分。在此文章中我們將介紹如何在 CSS 中創建一個簡單的導航菜單。

<ul>
<li><a href="#">主頁</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系我們</a></li>
</ul>

上面的代碼將創建一個無序列表，在列表項中包含了一個錨鏈接。每個鏈接將代表導航菜單項。下面是一些簡單的樣式規則，可以將該導航菜單變成標準樣式的水平導航菜單：

ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #333;
position: relative;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li:hover {
background-color: #111;
}

設置 ul 標簽的背景顏色、邊距和內距可以應用于整個導航菜單。將每個列表項浮動到左側可以使它們被排成一行。每個鏈接都應該用 display 屬性設置為 block，這樣導航菜單才能水平布局。設置鼠標懸停時的樣式可以讓導航菜單更具有可讀性和交互性。

通過以上簡單的 CSS 樣式規則，您可以輕松地創建一個基本的水平導航菜單?？梢愿鶕约旱男枰M行不同的樣式設置，例如改變字體顏色、背景顏色、邊框樣式等。