DIVI主题菜单默认显示为4列，通过CSS修改可以显示5列、6列等，根据需求显示。如果你还不会设置超级菜单，查看DIVI如何创建超级菜单的教程，非常简单。

更改 Divi 主题标题中的超级菜单列

添加自定义 CSS 以将大型菜单更改为 5 列

要将超级菜单中的列数更改为 5 列，请转到您的 WordPress 仪表板> Divi >主题选项>常规>自定义 CSS，然后添加以下代码。

@media (min-width: 981px) {
#top-menu li.mega-menu>ul>li {
width: 20%;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n) {
clear: unset;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
clear: unset;
}
}

记得保存，就能看到效果。

我们还可以使用自定义 css 将大型菜单中的列数更改为 2、3、6、7 或 8。

自定义 CSS 将大型菜单更改为 2 列

@media (min-width: 981px) {
#top-menu li.mega-menu>ul>li {
width: 50%;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n) {
clear: unset;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
clear: unset;
}
}

自定义 CSS 将大型菜单更改为 3 列

@media (min-width: 981px) {
#top-menu li.mega-menu>ul>li {
width: 33.33%;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n) {
clear: unset;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
clear: unset;
}
}

自定义 CSS 将大型菜单更改为 6 列

@media (min-width: 981px) {
#top-menu li.mega-menu>ul>li {
width: 16.6666666667%;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n) {
clear: unset;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
clear: unset;
}
}

自定义 CSS 将大型菜单更改为 7 列

@media (min-width: 981px) {
#top-menu li.mega-menu>ul>li {
width: 14.2857142857%;
min-height: 195px;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n) {
clear: unset;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
clear: unset;
}
}

自定义 CSS 将大型菜单更改为 8 列

@media (min-width: 981px) {
#top-menu li.mega-menu>ul>li {
width: 12.5%;
min-height: 195px;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n) {
clear: unset;
}

#top-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
clear: unset;
}
}

更改菜单模块中的大型菜单列

要将自定义代码应用于任何模块，建议按特定的 css 类将其定位，以便更改不会影响整个网站并导致任何意外问题。在代码中使用自定义 css 类可确保仅具有 css 类的模块受到影响。

所以第一步是将自定义 css 类添加到菜单模块中。

添加 CSS 类以更改菜单模块中的大型菜单列

打开“菜单模块>高级> CSS 类”的菜单模块设置，然后输入类 lwp-col-mega-menu。

添加自定义 CSS 以在菜单模块中将大型菜单更改为 5 列

同样是在Divi >主题选项中添加以下代码>常规>自定义CSS。

@media (min-width: 981px) {
.lwp-col-mega-menu li.mega-menu>ul>li {
width: 20%;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n) {
clear: unset;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
clear: unset;
}
}

您可以使用下面的代码之一将菜单模块中的大型菜单更改为 2、3、6、7 或 8 列。

自定义 CSS 以在菜单模块中将大型菜单更改为 2 列

@media (min-width: 981px) {
.lwp-col-mega-menu li.mega-menu>ul>li {
width: 20%;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n) {
clear: unset;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
clear: unset;
}
}

自定义 CSS 以在菜单模块中将大型菜单更改为 3 列

@media (min-width: 981px) {
.lwp-col-mega-menu li.mega-menu>ul>li {
width: 33.33%;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n) {
clear: unset;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
clear: unset;
}
}

自定义 CSS 以在菜单模块中将大型菜单更改为 6 列

@media (min-width: 981px) {
.lwp-col-mega-menu li.mega-menu>ul>li {
width: 16.6666666667%;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n) {
clear: unset;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
clear: unset;
}
}

自定义 CSS 以将菜单模块中的大型菜单更改为 7 列

@media (min-width: 981px) {
.lwp-col-mega-menu li.mega-menu>ul>li {
width: 14.2857142857%;
min-height: 195px;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n) {
clear: unset;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
clear: unset;
}
}

自定义 CSS 以将菜单模块中的大型菜单更改为 8 列

@media (min-width: 981px) {
.lwp-col-mega-menu li.mega-menu>ul>li {
width: 12.5%;
min-height: 195px;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n) {
clear: unset;
}

.lwp-col-mega-menu li.mega-menu>ul>li:nth-of-type(4n+1) {
clear: unset;
}
}