How to Customize the Dropdown Menu in Divi

by | Oct 31, 2017 | Divi Tutorial | 25 comments

Welcome to part 11 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I’m dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with WordPress and Divi.

In this tutorial, I show you “How to Customize the Dropdown Menu in Divi.” By default, Divi doesn’t provide us with many options to style the dropdown menu but with just a few lines of CSS, you can dramatically change the look of your sub-menu to separate your look from the average Divi design!

In this video, I show you how to adjust the sub-menu color, text alignment, hover over state and more. Enjoy, try it out and if you come up with some slick designs, be sure and let me know!

Here’s the CSS I used:


/*----------Sub Menu----------*/

#top-menu li li a {
    border: 1px solid white;
    margin-bottom: 15px;
    text-align: center;
}

#top-menu li li a:hover {
    color: #3e007f;
	background: white;
	opacity: 1!important;
}

.nav li ul {
    border-top: 0px solid #3e007f;
    margin-top: -20px;
}

/*----------Sub Menu Mobile----------*/

.et_mobile_menu {
    border-top: 0px solid #2ea3f2;
}

.et_mobile_menu li a {
    text-align: center;
}