Divi – horizontal sub menu

To create the submenu as in this screenshot:

1. Dashboard > Appearance > menus > Create new menu > add menu items
2. Dashboard > Appearance > widgets > Create new widget area
3. Dashboard > Appearance > widgets > (reload page to load new widget area) >  Add Navigation menu to widget area
4. Go to page > Divi builder
5. Add section > spacing > padding > top = 0px, bottom = 0px
6. Add row > spacing > padding > top = 14px, bottom = 14px
7. Add module >sidebar > Select new widget area
8. Sidebar module > advanced > CSS ID and Class > CSS class > add “horz-menu”
9. Sidebar module > design > Text > Text Alignment > right
10. Sidebar module > design > Layout > Show Border separator > no
11. Save the Section to library to use for other subpages
12. Dashboard > Divi > Theme Options > Custom CSS > add the following snippet

[css]
.horz-menu li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
.horz-menu li:last-child {
padding-right: 0px;
}
.et_pb_gutters3 .et_pb_column_4_4 .horz-menu .et_pb_widget {
width: 100%;
margin-right: 0px;
margin-bottom: 0px;
}
.horz-menu .current-menu-item {
font-weight: bold;
}
.et_pb_bg_layout_light.horz-menu .et_pb_widget li.current-menu-item a {
color: #b8b6b6;
}
[/css]