CSS Nav menu hover animation

[trish_tree]

Hi team,
Here's the css code below I put it in the wordpress, I using the Bridge theme, there's custom CSS I can add on.
it supposed to show the underline animation when hover, but it didn't work as I expected, could anyone help to check where's wrong, thank you!

here's the example for the menu animation:
stockholm89

.menu-animation-underline nav.main_menu>ul>li.active>a .menu-text:before{
width: 0;
}

.menu-animation-underline nav.main_menu>ul>li:hover.active>a .menu-text:before{
width: 100%;
}

 

[Johna]

I think it'll be easier if I can see your HTML.

But otherwise try adding transition-duration to your CSS like this:

.menu-animation-underline nav.main_menu>ul>li.active>a .menu-text:before{
  width: 0;
  transition-duration: 0.5s;  /*the 0.5s it the time it takes for the line to reach 100% and back*/
}

.menu-animation-underline nav.main_menu>ul>li:hover.active>a .menu-text:before{
  width: 100%;
  transition-duration: 0.5s;
}

I'm not too sure what you did here .menu-animation-underline nav.main_menu>ul>li.active>a .menu-text:before.