CSS的橫向菜單欄可以給網頁設計帶來更整潔、易用的界面體驗。以下是實現這種效果的示例：
<html>
<head>
<title>橫向菜單欄</title>
<style>
/* 初始化樣式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 設置菜單欄的樣式 */
.menu {
background-color: #eee;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
}
/* 設置菜單項的樣式 */
.menu-item {
list-style: none;
margin: 0 10px;
padding: 0 10px;
height: 100%;
line-height: 50px;
}
/* 設置菜單項的懸停狀態樣式 */
.menu-item:hover {
background-color: #ccc;
}
</style>
</head>
<body>
<div class="menu">
<ul class="menu-items">
<li class="menu-item"><a href="#">主頁</a></li>
<li class="menu-item"><a href="#">新聞</a></li>
<li class="menu-item"><a href="#">產品</a></li>
<li class="menu-item"><a href="#">聯系我們</a></li>
</ul>
</div>
</body>
</html>上述代碼中，我們使用了flex布局來使菜單欄橫向排列，并使用justify-content和align-items來使菜單項居中對齊。每個菜單項都是一個li標簽，并且用ul標簽將它們組合在一起。當用戶經過菜單項時，我們設置了它的背景顏色。