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.

enter image description here

  • Is the drop-down box with the sub-menu items a child of the top menu item?
    – Mihail
    Jun 28, 2019 at 0:16
  • Yes it is a child of the top menu.
    – MikeDurso
    Jul 1, 2019 at 12:44

1 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"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.