Divi Menu Module Sub-Menu Dropdown Styling: the Ultimate Guide

How to edit the Dropdown Menu in the Divi Menu Module?

If you are using the Divi Menu module and your navigation has multiple levels, you might be looking for a way to modify the appearance of the sub-menus – the dropdown menu items. In this video, you’ll find a detailed walkthrough on how to customize Divi submenus with CSS. I’ll show you how to change the width, the position, the font styling, and even how to add hover effects and that little triangle arrow – it’s all in here.

And if you’re just beginning your journey with custom CSS for Divi, I encourage you to check out our free CSS Beginner Guide!

Let’s get started!

CSS snippets to style the Divi Menu Module sub-menus:

Below, you’ll find a list of CSS snippets that will help you modify the appearance of the dropdown menus in Divi. You can copy and paste each bit of code separately and watch the video to learn how you can combine the CSS code snippets to create the perfect combination of modifications your navigation needs.

Important:

The code is designed to work with the Menu module, not the default Divi navigation. To make sure the code works with your Menu module, please use a custom CSS class of dl-menu. Add the class to the Menu module settings -> Advanced tab.

Change the width of the Divi submenu

The first part of the code changes the pixel value of the dropdown container. Replace the 300px with your desired dropdown container width. The second part of the code is there to make sure the second-level dropdown items are positioned correctly. You don’t need that part of the code if you only have one level of sub-menu items.

/* Change the width of the dropdown container */
.dl-menu ul.sub-menu {
    width: 300px;
}

/* Change the width of the links inside the dropdown */
.dl-menu ul.sub-menu li,
.dl-menu ul.sub-menu li a {
    width: 100%;
}

/* Position the second level dropdown correctly */
.dl-menu .nav li li ul {
    left: 300px;
}
.dl-menu .nav li.et-reverse-direction-nav li ul {
    left:auto;
    right:300px;
}

Extend Divi submenu links full-width

To make more room for link text inside the dropdown, we can remove unnecessary spacing and force each sub-menu item to stretch to the full width of the container:

/* Extend dropdown links full-width */
.dl-menu .nav li li {
    padding: 0;
    min-width: 100%;
}
.dl-menu .nav li li a {
    min-width: 100%;
}

Divi submenu links font styling

The following CSS selector targets all the links in your sub-menus. You can use that to change the font size, font weight, text transformation, or even the font family:

/* Change the dropdown links font */
.dl-menu .nav li li a {
    text-transform:none;
    font-weight:400;
    font-size:16px;
}

Change the hover effect of Divi submenu links

The CSS snippets below show you how you can change the default, semi-transparent background color that is visible when hovering over the dropdown items. You can change the color value or use none to remove the background completely. We are changing the transition property of submenu links to add a smooth text movement to the right (controlled by the padding-left property).

/* Change the dropdown links hover effect */
.dl-menu.et_pb_module.et_pb_menu .nav li li a {
    transition: all .3s ease-in-out;
}
.dl-menu.et_pb_module.et_pb_menu .nav li li a:hover {
    background:lightsalmon;
    opacity:1;
    padding-left:28px;
}

Remove the submenu border and inner spacing

When links in your submenus are full-width and you changed the hover background color, it might be helpful to know how to remove the top menu border (not just change its color using the Module settings) and how to remove all unnecessary spacing inside the dropdown container.

/* Remove the dropdown border and inner spacing */
.dl-menu.et_pb_menu .et-menu-nav ul.sub-menu {
    padding: 0;
    border-top: 0;
}

Align Divi submenu items with the parent link

The CSS code below moves the first-level submenu to the left, so that the menu items are aligned with the parent menu item. That works best with full-width submenu links. If you haven’t stretched the links, you might need to adjust the pixel value.

/* Move the first-level dropdown to the left */
.dl-menu ul.nav > li > ul.sub-menu {
    transform: translateX(-9px);
}

Add rounded corners to Divi submenu

You only need to use the first part of the CSS snippet below to add rounded corners to your submenus. But if you are using a custom background color on hover, you will also want to make sure that the first and the last menu items use correct border-radius.

/* Add rounded corners to the dropdown container */
.dl-menu.et_pb_menu .et-menu-nav ul.sub-menu {
    border-radius:10px;
}

/* Add rounded corners to the first dropdown item */
.dl-menu ul.sub-menu li:first-child a {
    border-radius: 10px 10px 0 0;
}

/* Add rounded corners to the last dropdown item */
.dl-menu ul.sub-menu li:last-child a {
    border-radius: 0 0 10px 10px;
}

Change or remove Divi submenu shadow

The CSS snippets below show you how you can change the default shadow behind the Divi dropdowns, or how to remove it completely:

/* Remove the dropdown shadow */
.dl-menu.et_pb_menu .et-menu-nav ul.sub-menu {
    box-shadow: none;
}
/* Modify the dropdown shadow */
.dl-menu.et_pb_menu .et-menu-nav ul.sub-menu {
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.2);
}

Add triangle top arrow to Divi submenu

The CSS code below includes the code generated by the CSS Triangle Generator and additional properties to position the arrow in the correct place:

/* Add triangle arrow to the dropdown */
.dl-menu ul.nav > li > ul.sub-menu:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #000000 transparent;
    position: absolute;
    top: -10px;
    left: 30px;
}

/* Move the arrow to the center */
.dl-menu ul.nav > li > ul.sub-menu:before {
    left: 50%;
    transform: translateX(-50%);
}

Center-align the Divi submenu

The CSS code below aligns the first-level dropdown menu in the center directly below the parent menu item. The second part of the code also center-aligns the text inside the container:

/* Center-align the dropdown */
.dl-menu ul.nav > li > ul.sub-menu {
    transform:translateX(-50%);
    left:50%;
    transition: all .3s ease-in-out;
}

/* Center-align the dropdown text */
.dl-menu .sub-menu a {
    text-align: center;
}

Custom animation for the Divi submenu

With the following bit of CSS code we can modify the default fade-in animation to add a slide-to-top effect:

/* Change the default dropdown animation */
.dl-menu ul.nav > li > ul.sub-menu {
    transform:translateY(10px);
    transition: all .3s ease-in-out;
}
.dl-menu ul.nav > li:hover > ul.sub-menu {
    transform:translateY(0);
}

If the submenu is already transformed to be in the center, you need to combine both the translateY with the translateX properties using this bit of code:

/* Change the default animation for the center-aligned dropdown*/
.dl-menu ul.nav > li > ul.sub-menu {
    transform:translate(-50%, 10px);
}
.dl-menu ul.nav > li:hover > ul.sub-menu {
    transform:translate(-50%, 0);
}

Change the Divi submenu vertical offset

If you are not using a logo image inside the Menu module, your sub-menu items can seem a bit too close to the top-level links. This bit of CSS increases the vertical offset of the dropdown navigation.

/* Change the vertical dropdown offset */
.dl-menu.et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li>a {
    padding-bottom: 15px;
}

Final Thoughts

Feel free to check out the demo page I’ve been working on when recording the video! 

I hope you enjoyed this explanation and found a way to make your dropdown menu look just the way you want. As always, please leave a comment with your thoughts below! I’d love to hear what you think about this type of tutorial and if it was helpful.

Shares

Have you seen our

Divi child themes?

Divi Toolbox plugin?

We offer a great selection of high-quality Divi products to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!

13 Comments

  1. Joe Vavra

    Is there some trick to making it work the same on mobile? It works great on desktop and iPad but not mobile. Any suggestions?

    Reply
    • Ania Romańska

      I’m afraid there is no trick. The mobile menu container is a separate element, so all the code would need to be different to target it. I might do a walkthorugh about it in the future 😉

      Reply
  2. Meredith

    For whatever reason when I try and do the arrow, it moves my whole menu over (I use left aligned + logo) to the left side and removes my logo and doesn’t add the top arrow. It also reverts all the CSS changes to the basic changes you can make in divi.

    Reply
  3. Parveen Sultana

    “Hello there! I just wanted to express my gratitude for the awesome menu customization you’ve provided. I watched your video and learned a lot about inspecting through the browser. I consider myself a good designer, but creating something like a navigation menu has always been a challenge for me. Thanks to your guidance, it now seems much easier! I am interested in joining your academy to enhance my knowledge. Thank you once again.”

    Reply
    • Ania Romańska

      I’m glad I could help and I’m thrilled to hear that you are considering joining our Divi Stylist Academy! Please feel free to get in touch if you have any questions about the program.

      Reply
  4. Mike Simpson

    Wow. That’s a great tutorial. I love the final look in the demo. I’d suggest 10 px more padding on the bottom of the dropdown menu? Just a tad tight. Thank you for sharing!

    Reply
  5. Mike

    Awesome work that has really helped me, thank you so much 😉

    Reply
  6. Jill

    Hello,

    Great tutorial but how do you make it work on a mobile or tablet using the hamburger menu icon? Mine does not seem to work.

    Thank You

    Reply
  7. JFVEGAS

    Thank you very much! You made my day!

    Reply
  8. Dick

    FABULOUS!, please marry me 🙂

    Reply
  9. steba

    Thanks a lot for this great tutorial. Pretty good explained :).
    But i can’t get it to work on a woocommerce shop page. Most of the settings are gone there 🙁 pls can you help?
    thx in advantage

    Reply
  10. erik

    how do i give the sub menu link another color?

    Reply
  11. Malte

    Thank you very much Ania. Now you have a really comprehensive suite of menu manipulation techniques. And not only for copypasting, but as a complete little course!
    Really cool. Everyone who wants to know their ways around Divi totally needs this!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Enjoing our content?

You might find this interesting…

License Details

REGULAR LICENSE

Single Site

A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

EXTENDED LICENSE

Unlimited Sites

An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

SUPPORT & UPDATES

Each license is a one-time payment. There are no annual fees. You get lifetime access to product updates. Support is provided for 6 months from the date of purchase.

Server Requirements

SERVER SETTINGS:

  • PHP 7.2 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)

PHP.INI SETTINGS:

  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module

PHP MODULES:

  • allow_url_fopen

Would you like to...

Consult Ania and fellow students?

Join the conversation inside our private FB group.

Would you like to...

Get support privately?

Submit a support ticket via your account page.

Ask Ania?

Submit a question for the next live Q&A session.

Consult fellow students?

Join the conversation inside our private FB group.
Identity: New Divi Child Theme Check it out