I am working on a dropdown Nav that on hover opens a dropdown of nav items. Some of these dropdown items have an additional hover effect that opens to the right of the original dropdown (see linked page and prototype).
I got this to work, but when I go to make that nav a component it breaks. While this is a component if you hover a nav option “Automotive” then hover one of the first two options to open the secondary dropdown, if you move the mouse outside of the nav the dropdown will stay on screen.
This does not happen when the nav is just a group. It only happens when the nav is a component. I have a demo set up with a sample of each:
