Code by Day | Explore By Weekend

How To Style and Customize The Divi Menu Module Submenu Dropdown Tutorial by Pee Aye Creative

How To Style and Customize The Divi Menu Module Dropdown Submenu

In this Divi tutorial, I'm going to show you how to style and customize the the Divi Menu module dropdown submenu with CSS.

Here is an example of how the default Divi dropdown menu looks:

How To Style and Customize the Divi Submenu with CSS

Here is the behind-the-scenes structure of the submenu by default:

Notice anything? Each separate piece has it’s own properties, like padding and width. They are nested within each other, so in order to customize what we want, we first need to learn to target the correct piece of the structure.

It is important for you to understand the structure of the Divi submenu first before we start customizing it with CSS.

This tutorial will go over each part of the submenu separately, and you can follow along and use it as a guide for styling your Divi menu dropdown submenu!

How To Customize And Style The Divi Menu Dropdown Submenu 

One of the first things we probably notice is the ugly blue thick like at the top of our submenu. Or maybe you want to remove some padding at the top or bottom or make it wider. You can do that by targeting the submenu unordered list as shown.

How To Customize And Style The Divi Menu Dropdown Submenu-

Edit The Overall Submenu

/*edit the Divi submenu*/
.et_pb_menu li ul {
YOUR CSS HERE
}

Once you have our CSS selector ready, you can start adding custom code where it says “YOUR CSS HERE.” (be sure to remove that text)

Custom Style Ideas

The following is a list of some ideas for things you might want to do to style the overall submenu. You can choose to do this by placing the snippets into the selector shown above.

Remove or adjust the spacing:

padding: 0!important;

Remove the default border at the top:

border-top: none;

Add a border:

border: 2px solid #2cba6c;

Change the background color:

background-color: #2cba6c;

Change the width:

width: 300px;

How To Customize And Style The Divi Menu Dropdown Submenu List Items

Now we move on to the list items. It can be confusing how the list items and the links relate, but if you take a close look at my suggested custom style ideas, you will start to see. The list items control the links items, but the next section of links controls the link text.

How To Customize And Style The Divi Menu Dropdown Submenu List Items-

Edit The List Items

/*edit the Divi submenu list items*/
.et_pb_menu li li {
YOUR CSS HERE
}

Edit The List Items On Hover

/*edit the Divi submenu list items on hover*/
.et_pb_menu li li:hover {
YOUR CSS HERE
}

Once you have our CSS selector ready, you can start adding custom code where it says “YOUR CSS HERE.” (be sure to remove that text)

Custom Style Ideas

The following is a list of ideas of some things you might want to do to style the submenu list items. You can choose to do this by default, or on hover, by placing the snippets into the correct selector shown above.

Remove or adjust the spacing:

padding: 0;

Change the background color (for on hover):

background: #2cba6c;

Add a border on the bottom:

border-bottom: 1px solid #e1e1e1;

How To Customize And Style The Divi Menu Dropdown Submenu Links

The last section of the Divi dropdown submenu is the links themselves. The link text is great to style, and I have provided some ideas below like changing the color, size, spacing, or width. Another obvious one is the opacity, which changes to .7 by default on hover, but you can override that if you want.

How To Customize And Style The Divi Menu Dropdown Submenu Links-

 Edit The Links

/*edit the Divi submenu links*/
.et_pb_menu li li a {
YOUR CSS HERE
}

Edit The Links On Hover

/*edit the Divi submenu links on hover*/
.et_pb_menu li li a:hover {
YOUR CSS HERE
}

Once you have our CSS selector ready, you can start adding custom code where it says “YOUR CSS HERE.” (be sure to remove that text)

Custom Style Ideas

The following is a list of ideas of some things you might want to do to style the submenu links. You can choose to do this by default, or on hover, by placing the snippets into the correct selector shown above.

Remove the spacing:

padding: 0;

Change the opacity (especially on hover):

opacity: 1;

Remove the slight background color (on hover):

background-color: rgba(0,0,0,0);

Change the width:

width: 240px;

Change the font size:

font-size: 12px!important;

Change the color:

color: #2cba6c;

Change the letter spacing:

letter-spacing: 2px;
65
Last updated Jan 9, 2021 @ 5:30 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
31 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Edgar
Edgar
11 months ago

Good tutorial, I think the next step on this series could be how to style the mobile menu. Just a thought.
Thanks

Aarón Blanco Tejedor
10 months ago

Super helpful, thank you! <3

JUDY OOSTHUIZEN
10 months ago

Thanks its an awesome tutorial

Anselmo
9 months ago

Hi,

Thanks for the tutorial, but it isn’t working for me. I’ve put the css in the theme options css editor. Nothing changes and I’ve some knowledge of css.

Anselmo

It works. Thanks

Charles Kiyimba
9 months ago

Thanks Nelson for this tutorial. I have used it on my online shop which I am currently building to change the background color of the dropdown menu and to remove the text underline on hover. It has worked well on desktop. However on mobile, I still have a challenge. What could be the code I can use to make it work?

Charles Kiyimba

Thanks. It will help us significantly.

Amar Kumar
8 months ago

Hi,
Thanks for the tutorial.
But the ugly Blue top border doesn’t goes off.

Tried so many time, did not happen.
Tried with Builder as well as Theme Customizer and Theme Option

.et_pb_menu li ul {
padding: 0!important;
border-top: none;
border-bottom: 1px solid #4a835e;
}

.et_pb_menu li li {
padding: 0!important;
border-top: none;
border-bottom: 1px solid #4a835e;
}

.et_pb_menu li li:hover {
padding: 0!important;
border-top: none;
border-bottom: 1px solid #4a835e;
}

But this isn’t going

federico
4 months ago

Hi Nelson, thank you for the tutorial! But I am desperately trying to modify a menu inserted as Divi menu module (not a main menu in the header but in the body). Specifically I would like to highlight the active menu item linked to an anchor on the same page .. do you have any idea how to underline the active menu items of an anchor-linked menu module? Many thanks in advance!

John F Carroll
3 months ago

Hi Thanks for your excellent tutorials. I’m currently rebuilding a website – http://www.halfmanhalfmovie.com – and the rebuild is using Divi at https://homemacsupport.com/. I’ve used your CSS for the submenu at https://homemacsupport.com/ but I can’t understand why I have to make the submenu size as wide as the widest link. This then makes the submenu’s with smaller links appear in a box that is so big. Is there no CSS that tells the submenu links not to wrap text and the submenu box to adjust to fit the size of the the largest link in the box. I’m honestly don’t understand… Read more »

John

Yeah I talked to Divi today. I would have thought this was elementary… like didn’t someone mention it in a meeting. They said they’d pass it on . Thanks for your code snippets 🙂

craig
craig
2 months ago

hi, great tutorial, i was wondering if you have an explanation on the mobile menu yet?

Ales
2 months ago

Hi, what does mean class “.et_pb_menu” , I can´t find it in my html code. Why did you use this class?

Saifee Collection
1 month ago

Hey, nice tutorial!
But how do I get the same drop down menu style in mobile & tablet view? Please share the snippet for mobile & tablet if possible.

Thanks.
Saifee Collection.

Last edited 1 month ago by Saifee Collection
Henk
Henk
1 month ago

Hi Edgar,

Great tutorial! Thank’s a lot.

All CSS works perfectly when I use the CSS in a menu somewhere in the body of any page. But the CSS doesn’t work when I add the CSS to the page setup of a global header. What am I doing wrong?

Can you help me?
Thanks!

the vibe
the vibe
1 month ago

couldn’t this be done in the custom CSS in the menu module? Then It would be global if you are using the theme builder…right?

the vibe
the vibe

I now see lol. Would I be able to add a different font to the dropdowns? How would I do that?

Thanks for creating the content you do it is helpful and your videos are just chill and approachable.😊

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,800 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart