CSS 雙行菜單是一個非常實用的功能，它可以讓頁面更加美觀和易用。下面我們來學習一下如何使用 CSS 雙行菜單。

首先，我們需要使用 HTML 創建菜單。下面是一個簡單的例子（使用了<ul>和<li>標簽）：

<ul class="menu">
<li><a href="#">菜單項 1</a></li>
<li><a href="#">菜單項 2</a></li>
<li><a href="#">菜單項 3</a></li>
<li><a href="#">菜單項 4</a></li>
<li><a href="#">菜單項 5</a></li>
<li><a href="#">菜單項 6</a></li>
</ul>

接下來，我們使用 CSS 來創建雙行菜單。首先，我們需要使用display: inline-block;讓每一個菜單項顯示在同一行上：

.menu li {
display: inline-block;
margin-right: 20px;
}

然后，我們使用white-space: nowrap;讓菜單不換行。

.menu {
white-space: nowrap;
}

現在，我們的菜單已經可以在同一行上顯示。接下來，我們需要使用 CSS 讓菜單換到第二行。

.menu li:nth-child(n+4) {
clear: both;
}

這里，我們使用clear: both;讓第 4 個菜單項（也就是第一個需要換行的菜單項）移到第二行。然后我們還需要修改前三個菜單項的樣式，使它們出現在第一行。

.menu li:nth-child(-n+3) {
margin-top: 20px;
}

這里，我們使用margin-top: 20px;讓前三個菜單項與第一行保持一定的距離。

現在，我們的雙行菜單已經完成了！