Archived topic
Creating mega menu style dropdown on hover.
4 replies · Started by Alexander on September 30, 2022
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 :)
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.
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.
yes, you are correct. It doesn't work.
Is their another way that you know works?
I don't think it's that simple, otherwise, there will not be mega menu plugins :)
