I am currently designing a website with a navbar that was created in this manner: section – container – two columns – and links in each column. The intention is to create a drop down megamenu with a new section and links in that section when the initial nav link is activated through the hover effect. I was able to get the drop down section to appear on hover but am having issues keeping the effects on both the nav link and the megamenu section active when hovering over the link/section. How can I make the initial nav link to stay in a hover state when the megamenu section is also open and both return to the origin when hover off? I appreciate any feedback and information regarding this issue.
Ive been having this dilemma with mega menu’s today… we need to create a prof of concept and to be honest using the interactions has been a little cumbersome and buggy. I’ve played around with your version and it works a treat. Couple of things i did;
meganav-sec position absolute, top
added 170 pix margin from the top to bring it down to sit where it originally was
changed the z index to 1
The next thing i did (this is a hacky way of doing it but for poc i could get away with it):
added another div to your div block
gave it a fixed width & height so it was the same width and height as your nav link
gave it negative margin so it sat under it.
Styled it the same as your hover state
I also made the nav link position relative and gave it a z index of 2 so it sat on top of the hover state.
Its a hax maybe passable for a proof of concept but in real world probably best use some custom code.