You can easily add an animated growing line beneath the menus 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.

divi menu hover effect

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.

divi default header style

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 grows from the center as opposed to starting from left to right.