Mega menus in Genesis

Is there a good way to create a Genesis mega menu without using a plugin (such as UberMenu, which is great but very resource-intensive)?

Ideally, I'm looking for a solution that is primarily CSS-based, where a client can use the regular WP Menu page. If a submenu (child) item has its own child (ie third-level deep), then the second-level item should become a column header of the mega menu, with the third-level items in a list below it. Any ideas? Many thanks!

In this article, I share the CSS for displaying third-level submenus in columns with the second-level menu items as column headings in a mega menu upon hovering on a top-level menu item in Genesis.

In the 1024px min-width media query, for .mega-menu > .sub-menu, if you set right: 0; you can have the mega menu appearing to the left with the right edge matching with the right edge of the parent menu item.

Hi Sridhar
Thanks for this code, its working well, but I have a slight issue I’ve not been able to work out and hoped you might be able to help.

I’m using News-Pro as the theme and I essentially just copied your code. It works as expected, but when you load the page, any page the menus (I have 2 megamenus) open up for a second then disappears, also for a few seconds if you roll over the area of the site where the menus would appear, not the buttons, the menu appears. It only does this once.