SharePoint Online custom navigation bar

Question

So I have a custom navigation bar that is almost finished except for one little style thing I cannot figure out. The top image is what it looks like when you hover over the top piece of the drop down and the second image is what it looks like when you hover over a specific item in the sub navigation. What I would like to accomplish is for the item in the top navigation header to remain how it looks when it is hovered over when the user is hovering over one of the items in that sub navigation menu. So in this example when hovering over "Professional Services" that should be highlighted while "Customer Success" should also be highlighted.

As far as CSS Everything is the default corev15.css file that sharepoint uses and I have another file that uses the same classes and IDs which I overwrite where needed.

Answer 1

You can use CSS transition with delay. The following articles for your reference.

Make CSS hover state remain after unhovering

Make CSS Hover state remain after "unhovering"