Divisoup’s solution

Only works if you don’t have submenu’s: https://kb.hrcws.nl/menu-add-hover-effects/

Elegant’s solution

Source: https://www.elegantthemes.com/blog/divi-resources/beautiful-css-hover-effects-you-can-add-to-your-divi-menus

/* -- START underline menu  -- */
#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}
#top-menu li a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 50%;
 background: #00adee;
 height: 3px;
 transition: opacity 0.3s, transform 0.3s;
 transform: translateX(0px);
}
#top-menu li a:hover {
 opacity: 1 !important;
}
#top-menu li a:hover:before {
 right: 0;
}
#top-menu li li a:before {
 bottom: 10%;
}
/* -- END underline menu -- */

Code language: CSS (css)

The red highlighted line pops the underline. To slide the line in from the left, replace it with this:

transition-property: right;
transition-duration: 0.3s;
transition-timing-function: ease-out;Code language: HTTP (http)