[Support request] Creating mega menu style dropdown on hover.

[Alexander]

Hello,
I am running a test to build out a mega menu using the block editor to create the dropdown content.
I ran into issues using the navigation menu so decided to test using a simple headline block that when hovered reveals the dropdown.
If you know a better way please let me know?
When hovering above the “.dropdown class” headline I want the “.dropdown-content”container to appear.
Could you help me with this?

Here is an image of the layout in gutenberg editor:

you can inspect the site here:
https://xander.one/

Here is the css I want to apply:
/* dropdown */
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
visibility: visible;
}

Thank you 🙂

[Alexander]

I will also put together a detailed video together showing other generate press + blocks users how to do this once i have it running and stable.

[Ying]

Try change this:

.dropdown:hover .dropdown-content {
    display: block;
    visibility: visible;
}

to

.dropdown:hover +.dropdown-content {
    display: block;
    visibility: visible;
}

But I don’t think you’ll be able to click the elements inside thedropdown-content, that’ll be complicated to achieve.

[Alexander]

yes, you are correct. It doesn’t work.
Is their another way that you know works?

[Ying]

I don’t think it’s that simple, otherwise, there will not be mega menu plugins 🙂

[Author]

Posts