Bottom border effect a different color for each menu item on hover

Dearest HB Themes team,

I hope you all are doing well today. First and foremost, I want to thank you all for building such beautiful templates. They work wonders, especially the header, which has played a critical role in my website’s success.

I’m interested in implementing certain things to my header, and one of those things is to have a different bottom border color for each menu item. Currently, they are all white. I wish to change this by having the first menu item’s border color be red on hover, then the second item be blue, the third green, and the fourth orange.

It would mean a lot to me if this can be done. Thank you!