Divisoup’s solution
Only works if you don’t have submenu’s: https://kb.hrcws.nl/menu-add-hover-effects/
Elegant’s solution
/* -- 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)