CSS菜單是網(wǎng)頁(yè)設(shè)計(jì)中非常重要的一部分。一行菜單的布局是最基本的，但有時(shí)候我們需要在菜單中添加一些新的選項(xiàng)，這時(shí)候就需要使用兩行菜單來(lái)解決。下面我們來(lái)看看如何實(shí)現(xiàn)CSS菜單兩行布局。

<div class="menu-container">
<ul class="first-row">
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">產(chǎn)品中心</a></li>
<li><a href="#">新聞中心</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
<ul class="second-row">
<li><a href="#">客服中心</a></li>
<li><a href="#">支付方式</a></li>
<li><a href="#">用戶手冊(cè)</a></li>
</ul>
</div>

首先我們使用一個(gè)menu-containerdiv包含了兩個(gè)ul元素，分別代表兩行菜單。我們可以看到第一行菜單中包括了常見(jiàn)的選項(xiàng)，而第二行菜單則是一些額外選項(xiàng)。下面是CSS樣式代碼。

.menu-container {
overflow: hidden;
background-color: #f8f8f8;
border: 1px solid #d4d4d4;
}
.first-row {
list-style: none;
margin: 0;
padding: 0;
}
.first-row li {
display: inline-block;
margin: 0;
padding: 12px 20px;
font-size: 14px;
font-weight: bold;
}
.first-row li a {
color: #333;
text-decoration: none;
}
.first-row li:hover {
background-color: #e4e4e4;
}
.second-row {
list-style: none;
margin: 0;
padding: 0;
display: none;
}
.second-row li {
display: inline-block;
margin: 0;
padding: 12px 20px;
font-size: 14px;
font-weight: bold;
}
.second-row li a {
color: #333;
text-decoration: none;
}
.second-row li:hover {
background-color: #e4e4e4;
}
@media (min-width: 768px) {
.first-row li {
padding: 12px 15px;
}
.second-row {
display: inline-block;
margin-left: 20px;
}
}

樣式代碼中，我們?cè)O(shè)置了一個(gè)menu-containerdiv元素的寬度，使用了overflow:hidden屬性，保證菜單內(nèi)容不會(huì)溢出容器。我們還為兩行菜單分別設(shè)置了樣式，其中第二行菜單默認(rèn)是隱藏的，只有在視口寬度大于等于768px時(shí)才會(huì)顯示。

通過(guò)以上代碼，我們成功實(shí)現(xiàn)了一個(gè)CSS菜單兩行布局。當(dāng)然，你還可以根據(jù)自己的需要進(jìn)行樣式調(diào)整和更改。希望本文對(duì)你有所幫助。