CSS是網頁設計中一個非常重要的部分。它讓我們可以對網頁中的任何元素進行樣式和布局的設置。在這篇文章中，我們將會介紹如何使用CSS設置橫向菜單。

.nav {
display: flex;   /* 定義為Flex布局 */
flex-direction: row;   /* 橫向排列 */
justify-content: center;   /* 居中對齊 */
list-style: none;   /* 去除列表標記 */
padding: 0;   /* 去除內邊距 */
}
.nav li {
margin: 0 10px;   /* 左右間距 */
}
.nav a {
display: block;   /* 隱藏文字下劃線 */
text-decoration: none;
color: #333;
padding: 10px;
transition: all .3s ease;   /* 顏色漸變 */
}
.nav a:hover {
background-color: #333;
color: #fff;
}

首先，我們創建一個具有Flex布局的導航菜單。可以通過設置flex-direction屬性為row來使它橫向排列。justify-content屬性可以讓它居中對齊。我們還去掉了默認的列表標記和內邊距，以確保我們的菜單看起來干凈整潔。

接下來，我們給每個菜單項設置外邊距，以便它們之間有一定的距離。我們還給a元素增加了一些樣式，包括將文字下劃線隱藏和文字顏色設置為黑色。

最后，我們使用CSS過渡效果使鼠標懸停在菜單項上時，顏色緩慢地從黑色變為白色。這是一種非常漂亮和優雅的特效。

總的來說，使用CSS設置橫向菜單是很容易的。我們只需要簡單地定義一些Flex屬性，去除默認樣式，然后加上一些我們自己的樣式即可。這樣就可以輕松地創建一個漂亮的橫向導航菜單。