HTML的橫向菜單欄是很常用的一種網頁布局。通過一段簡單的代碼，就可以創建一個美觀的菜單欄。下面是一個例子：

<style>
.menu {
display: flex;
list-style: none;
padding: 0;
margin: 0;
background-color: #fff;
border-bottom: 1px solid #ddd;
}
.menu li {
margin-right: 20px;
}
.menu li:last-child {
margin-right: 0;
}
.menu a {
color: #333;
text-decoration: none;
font-weight: bold;
padding: 10px 15px;
border-radius: 5px;
}
.menu a:hover {
background-color: #eee;
}
</style>
<ul class="menu">
<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>

這段代碼基本上就是通過CSS樣式將一個無序列表變成了一組水平排列的鏈接。通過display屬性和flex布局，可以讓這些鏈接水平排列。使用list-style屬性可以隱藏列表的默認樣式，padding和margin屬性可以讓菜單欄與頁面的其它元素保持距離。a標簽的樣式可以通過CSS來修改，可以根據實際需要修改鏈接的顏色、字體、圓角、背景色等。最后，當用戶懸停在鏈接上時，可以通過:hover偽類來添加鼠標懸停時的樣式效果。這樣，就可以創建一個簡單、實用、美觀的橫向菜單欄了。