Change the color of the primary menu and sub menu links on desktop and mobile, when you hover over them. By default you can set the color of the Primary Menu items and only the active menu item using the DIVI options.

Its a good visual indicator for the user when you change the color of the menu, specially if you have long sub menus. 

Let’s add some CSS to change the colors for desktop and mobile. To do this head over to your style.css in your child theme and paste the following CSS.  Alternatively you can also go to DIVI -> Theme Options and paste the CSS in the Custom CSS box. 
I have used an orange color (#ffa500) in my example CSS. Change it to the color best suitable for your website.

Add CSS to Change Hover Colors for your Primary Menu

/* Change color on primary menu */
#top-menu-nav #top-menu a:hover,#mobile_menu_slide a:hover
{
    color: #ffa500!important;
    opacity:1 !important;
}

Change color of primary menu on hover – DIVI

Add CSS to Change Hover Colors for your Mobile Menu

/* Change color on Mobile Menu  */
.et_mobile_menu li a:hover, header#main-header.et-fixed-header ul li ul li a:hover
{
color: #ffa500 !important;
opacity:1 !important;
}

Change color of mobile menu on hover – DIVI

I hope this DIVI Tip was helpful and if you do use it on your site, leave me a comment. For more such useful tips on WordPress and DIVI, do check out my DIVI Blog. 

Related Posts –

• How to Remove the Drop Down Arrow from the DIVI Primary Menu
• How to Change Hamburger or Mobile Menu Color in Divi
• Change the Color for Email, Phone and Social Media Icons in DIVI

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.