You can easily add an animated divi menu underline beneath each menu in the Divi theme from Elegant Themes with a little custom css added to your WordPress site running the Divi theme. This menu underline effect grows from the center and shows on the desktop menu only.
This css style is using the default settings for header format. If you’ve just installed Divi you don’t need to configure this setting, it should be set to this automatically.
Add the following code to your child stylesheet OR to Divi theme options > general > custom CSS box:
#top-menu > li > a:hover {
color: #01498a !important;
}
#top-menu-nav > ul > li > a {
display: inline-block;
position: relative;
padding-bottom: 0px;
}
#et-info-email:hover, #et-secondary-menu>ul>li>a:hover, #top-menu-nav>ul>li>a:hover, .et-social-icons a:hover {
opacity: .7;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#top-menu-nav > ul > li > a:hover:after {
background-color: #01498a !important;
}
#top-menu-nav > ul > li > a:hover:after {
width: 100%;
background: #01498a;
}
#top-menu-nav > ul > li > a:after {
content: '';
display: block;
margin: auto;
margin-top: 9px;
height: 4px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
Note that Elegant Themes also has a tutorial to add CSS Hover Effects to Divi menus. The difference here is that the above code does not add the current menu item css style and also this effect for a divi menu underline grows from the center as opposed to starting from left to right.