CSS頭部導航欄是一個非常常見的網頁元素，它可以讓用戶快速定位網頁的不同部分。接下來我們將介紹如何用CSS制作一個簡單的頭部導航欄：

HTML結構：
<nav>
<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>
</nav>
CSS樣式：
nav {
background-color: #333;  // 設置導航欄背景色
padding: 10px;  // 設置內邊距，增加美觀度和可讀性
}
ul {
list-style-type: none;  // 去除默認的圓點符號
margin: 0;  // 去除默認的外邊距
padding: 0;  // 去除默認的內邊距
}
li {
display: inline-block;  // 設置列表項橫向排列
margin-right: 10px;  // 設置列表項之間的距離
}
a {
color: #fff;  // 設置鏈接文字顏色
text-decoration: none;  // 去除鏈接下劃線
padding: 5px;  // 設置鏈接內邊距，增加可讀性和鼠標懸停效果
}
a:hover {
background-color: #666;  // 設置鼠標懸停時鏈接背景色
}

通過上述CSS樣式設置，我們就可以輕松地制作一個簡單的頭部導航欄了。當然，如果想要更加豐富的效果和交互體驗，還可以添加更多的CSS樣式和JavaScript代碼。