animated bottom border only for top level in hover

#mega-menu-wrap-max_mega_menu_2 #mega-menu-max_mega_menu_2 > li > a:after{
  display:block;
  content: ''  !important;
  border-bottom: solid 3px #7C8E79;  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
}
#mega-menu-wrap-max_mega_menu_2 #mega-menu-max_mega_menu_2 > li > a:hover:after{
        transform: scaleX(1);
}

I opened this topic as a question but the later figured out the problem. so ill edit this as a topic which will help others do like this. If the above code doesn’t work use !important

1. Trying to do as the menu in this website HERE

• This topic was modified 3 years, 10 months ago by shenalorlof.
• This topic was modified 3 years, 10 months ago by shenalorlof.