在WordPress網(wǎng)站設(shè)計(jì)中，導(dǎo)航菜單的布局直接影響用戶體驗(yàn)。默認(rèn)情況下，二級(jí)菜單（子菜單）通常以下拉列表的形式展示，但有時(shí)我們希望二級(jí)菜單能夠并排顯示，以提升頁面的美觀性和易用性。本文將介紹如何通過CSS和插件兩種方式實(shí)現(xiàn)WordPress二級(jí)菜單的并排顯示。

方法一：通過CSS實(shí)現(xiàn)二級(jí)菜單并排

1. 進(jìn)入WordPress后臺(tái) 登錄WordPress后臺(tái)，依次點(diǎn)擊 外觀 > 自定義 > 額外CSS，進(jìn)入自定義CSS編輯界面。

2. 添加CSS代碼 在CSS編輯框中輸入以下代碼，調(diào)整子菜單的顯示方式：

.sub-menu {
display: flex !important;
flex-wrap: wrap;
position: static !important;
width: 100%;
}
.sub-menu li {
float: none;
display: inline-block;
margin: 0 10px;
}

這段代碼會(huì)讓子菜單以彈性布局（Flexbox）方式排列，并取消默認(rèn)的下拉效果，使子菜單項(xiàng)水平并排顯示。

1. 保存并預(yù)覽 點(diǎn)擊 發(fā)布 按鈕，刷新網(wǎng)站前臺(tái)查看效果。

方法二：使用插件實(shí)現(xiàn)二級(jí)菜單并排

如果不想手動(dòng)修改代碼，可以使用插件快速實(shí)現(xiàn)二級(jí)菜單并排，推薦以下兩款插件：

1. Max Mega Menu

• 安裝并激活插件后，進(jìn)入 Max Mega Menu 設(shè)置。
• 選擇需要修改的菜單，啟用 Mega Menu 功能。
• 在布局選項(xiàng)中，設(shè)置子菜單為 網(wǎng)格布局 或 水平排列。

1. Menu Icons

• 該插件不僅可以添加圖標(biāo)，還能通過CSS類調(diào)整菜單樣式。
• 在菜單編輯界面，為子菜單項(xiàng)添加自定義CSS類（如 inline-submenu），然后在 額外CSS 中添加樣式代碼：

.inline-submenu .sub-menu {
display: flex;
flex-direction: row;
}

注意事項(xiàng)

• 不同WordPress主題的菜單結(jié)構(gòu)可能不同，如果上述CSS無效，建議使用瀏覽器開發(fā)者工具（F12）檢查菜單的HTML結(jié)構(gòu)，調(diào)整對應(yīng)的CSS選擇器。
• 如果使用插件，建議先備份網(wǎng)站數(shù)據(jù)，避免兼容性問題。

通過以上方法，你可以輕松實(shí)現(xiàn)WordPress二級(jí)菜單的并排顯示，提升網(wǎng)站導(dǎo)航的視覺效果和用戶體驗(yàn)！