在網頁設計中，導航菜單是非常重要的一個元素，它可以讓網站的訪問者快速了解網站的頁面結構。而導航菜單的排列方式又有很多種，其中比較常見的就是橫向排列。下面我們就來看看如何使用css實現這種橫向排列的導航菜單。

<ul id="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>

首先，我們需要創建一個ul列表，每個菜單項使用li標簽包裹。接下來，在css中設置ul的display屬性為flex，即可實現橫向排列。

#menu {
display: flex;
list-style: none;
padding: 0;
}
#menu li {
margin-right: 20px;
}
#menu li:last-of-type {
margin-right: 0;
}

上述代碼中，我們設置了ul的display屬性為flex，表示將子元素變為一個flex容器。同時，我們還設置了列表項的margin-right屬性，使得每個菜單項之間留有一定的空隙。其中，最后一個菜單項的margin-right屬性被設置為0，避免最后一個菜單項后面出現多余的空隙。

除了以上的基礎設置之外，我們還可以針對導航菜單的不同狀態進行樣式設置。例如，我們可以利用:hover偽類來實現鼠標懸停時菜單項背景色的變化。

#menu li:hover {
background-color: #f2f2f2;
}

另外，為了讓導航菜單更加美觀，我們還可以利用css3的特性，如漸變色、陰影等。下面以漸變色為例：

#menu li {
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
background-repeat: no-repeat;
}

代碼解釋：使用background-image屬性設置漸變背景色，該屬性值為linear-gradient()函數，其中to bottom表示從上到下，#ffffff表示起始顏色，#f2f2f2表示結束顏色。同時我們還設置了background-repeat屬性為no-repeat，避免背景圖像的重復顯示。

總之，在使用css實現導航菜單橫向排列的過程中，我們需要注意樣式的細節，并根據自己的需要進行適當的樣式調整，才能讓網站的導航菜單看起來更美觀、更人性化。