CSS橫向菜單是Web頁面上常見的一種導航方式，它可以使得用戶更方便地瀏覽網站頁面上的不同部分。下面我們來學習一下如何使用CSS將一個橫向菜單進行鋪排。

<style>
nav{
display: flex; /*將導航菜單變為彈性盒子*/
justify-content: center; /*水平居中*/
list-style: none; /*無序列表樣式*/
margin: 0; /*去除默認外邊距*/
padding: 0; /*去除默認內邊距*/
}
nav li{
margin: 0 1rem; /*每個導航項之間的空隙*/
padding: 0.5rem; /*導航項的邊距*/
}
nav a{
text-decoration: none; /*去除下劃線*/
color: #333; /*導航項字體顏色*/
}
/*鼠標懸停效果*/
nav a:hover{
color: #f00; /*字體顏色變為紅色*/
background-color: #ccc; /*導航背景色變為灰色*/
}
</style>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產品中心</a></li>
<li><a href="#">新聞中心</a></li>
<li><a href="#">關于我們</a></li>
</ul>
</nav>

以上代碼會生成一個四個項目的導航菜單，其中flex屬性將ul元素變成彈性盒子，justify-content屬性將導航菜單水平居中，list-style屬性去除無序列表的默認樣式。 每個導航項都是li元素，它們之間通過margin屬性設置間距，padding屬性設置邊距。 鏈接使用a標簽包裹，其中text-decoration屬性去除下劃線，color屬性設置字體顏色。當鼠標懸停在導航項上時，color、background-color屬性會改變，實現了鼠標懸停效果。