Creating an Underline Menu in Divi (hover effect)

Instructions

An underline menu hover effect like in Extra Theme now available for Divi too.

All you have to do is to put this code to Theme Options > Custom CSS or in the Style.css file of your child theme. Also you can change the underline color (background: #404040; /* Change your color here */)

#top-menu .current-menu-item a::before {
-webkit-transform: translateY(18px);
transform: translateY(18px);
opacity: 1.0;
}

#top-menu li a:hover:before {
-webkit-transform: translateY(18px);
transform: translateY(18px);
opacity: 1;
}

#top-menu li a:before {
content: '';
position: absolute;
top: 10px;
left: 0;
background: #404040; /* Change your color here */
width: 100%;
height: 2px;
-webkit-transform: translateY(24px);
transform: translateY(24px);
opacity: 0;
transition: 0.3s ease;
}
Divi Rocket - Best Caching Plugin

Get Divi Rocket Plugin

Specifically Designed for the Divi Theme