Bradley,
Thank you for the additional clarification in the comments. I have written some javascript (jQuery) that you’ll need to insert into your theme:
jQuery( "#panel-2-1-0-0" ).hover( //Print and Document
function() {
jQuery('#mega-menu-item-475').addClass('mega-toggle-on');
}, function() {
jQuery('#mega-menu-item-475').removeClass('mega-toggle-on');
}
);
jQuery( "#panel-2-1-1-0" ).hover( //Telecom
function() {
jQuery('#mega-menu-item-477').addClass('mega-toggle-on');
}, function() {
jQuery('#mega-menu-item-477').removeClass('mega-toggle-on');
}
);
jQuery( "#panel-2-1-0-1" ).hover( //IT Dev
function() {
jQuery('#mega-menu-item-476').addClass('mega-toggle-on');
}, function() {
jQuery('#mega-menu-item-476').removeClass('mega-toggle-on');
}
);
jQuery( "#panel-2-1-1-1" ).hover( // Safety and Security
function() {
jQuery('#mega-menu-item-478').addClass('mega-toggle-on');
}, function() {
jQuery('#mega-menu-item-478').removeClass('mega-toggle-on');
}
);
Each of these blocks targets the panel in question. Once the user hovers over a block, it finds the corresponding mega-menu element and applies a class which makes it display. When the user moves their mouse away, it removes the class and hides the menu.
As you see, the code is based on the ID’s associated with the mega menu elements and the blocks. If you change the blocks or menu ID’s the script will no longer work.
There is a cleaner way to accomplish this (not relying on the IDs) but for purposes of getting you headed in the right direction this will work.
Hope this helps get you on the right track and let me know if you have any questions.