Hoverable menu to appear in different sections of page

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.