水平導航欄是網頁設計中常用的一種菜單樣式。通過CSS的樣式控制，我們可以輕松實現水平導航欄的制作。

<ul class="navbar">
<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>

以上是水平導航欄的HTML代碼，接下來我們通過CSS樣式控制，將其變成一條漂亮的水平菜單：

.navbar {
list-style-type: none; /*去掉默認的列表標志*/
margin: 0;
padding: 0;
overflow: hidden; /*清除浮動*/
background-color: #333; /*設置菜單背景顏色*/
}
.navbar li {
float: left; /*將列表項左浮動*/
}
.navbar li a {
display: block; /*設置超鏈接元素塊狀屬性*/
color: white; /*設置字體顏色為白色*/
text-align: center; /*設置內容居中*/
padding: 14px 16px; /*設置文字內邊距*/
text-decoration: none; /*去掉下劃線*/
}
.navbar li a:hover {
background-color: #4CAF50; /*鼠標經過時，改變背景顏色*/
}

通過以上代碼，我們實現了一條簡單卻實用的水平導航欄。我們設置了菜單的背景顏色、字體顏色、內邊距等樣式屬性，讓菜單看起來更加美觀。