實現橫排菜單，需要用到HTML、CSS和JavaScript，當然，這里還會用到Vue這個流行的JavaScript框架。在這篇文章里，我們將詳細介紹如何使用Vue實現橫排菜單。

首先，我們需要在HTML頁面中創建一個導航欄容器，用來容納菜單項。這個容器可以是一個div，也可以是nav，取決于你的個人習慣。這里我們以div為例：

<div id="app">
<div class="navbar">
</div>
</div>

接下來，我們需要在CSS中設置導航欄容器的樣式，這里我們設置寬度為100%，高度為50px，背景顏色為#333，以及使其fixed定位在頁面頂部：

.navbar {
width: 100%;
height: 50px;
background-color: #333;
position: fixed;
top: 0;
}

現在，我們需要在Vue實例中定義一個數組，存儲菜單項的信息，比如名稱、鏈接等信息：

var menuItems = [
{ name: '首頁', link: '#' },
{ name: '產品', link: '#' },
{ name: '服務', link: '#' },
{ name: '聯系我們', link: '#' },
];

接著，我們需要在Vue實例中定義一個組件，用來顯示菜單項。這個組件需要接收一個props，表示菜單項的信息。組件的模板需要使用v-for指令來循環渲染菜單項：

Vue.component('menu-item', {
props: ['item'],
template: '<a :href="item.link">{{ item.name }}</a>',
});

在Vue實例中，我們需要將剛才定義的組件注冊為全局組件，并定義一個新的數組，存儲用菜單項組件來渲染的菜單項：

var app = new Vue({
el: '#app',
data: {
items: menuItems,
},
components: {
'menu-item': MenuItem,
},
});

最后，在導航欄容器中使用v-for指令來渲染菜單項組件。這里需要注意使用v-bind指令將當前項傳遞給組件：

<div id="app">
<div class="navbar">
<menu-item v-for="item in items" :item="item" :key="item.name"></menu-item>
</div>
</div>

至此，我們就成功地使用Vue實現了橫排菜單。