How Can I Make The Sub-menu In Fusion Mega Menu Only Show On Hover?

I am using a Fusion theme for Wordpress and attempting to match the mega menu on the old site. If you have a look at production: Production site You can see what I want by hovering

Solution 1:

i'm not familiar with "Fusion" theme but by taking a look on the code it seems like there are some big differences between the CSS of the original theme to yours and and it look like there are also some js who needs to be running on your drop-down menu to add "left" and "height" values to the "sub-menu" class for example.

your "sub-menu" class is set to position: relative; when it need to be position: absolute; and there is more to change but i want to make it easier for so i made a live example which is similar.

in general, you can use class for every 'ul' element (level1, level2, each.) instead of selecting by "direct child" (>) like i did.

HTML:

<divclass="dropdown"><ul><li><ahref="#">level1-link1</a></li><li><ahref="#">level1-link2</a><ul><li><ahref="#">level2-link1</a></li><li><ahref="#">level2-link2</a><ul><li><ahref="#">level3-link1</a></li><li><ahref="#">level3-link2</a><ul><li><ahref="#">level4-link1</a></li><li><ahref="#">level4-link2</a></li></ul></li></ul></li></ul></li><li><ahref="#">level1-link3</a></li><li><ahref="#">level1-link4</a></li><divclass="clear"></div></ul><divclass="white_layer"></div></div><imgsrc="http://dev.icsandbox.com/wp-content/uploads/2015/01/Home_CloselyHeld-opt.jpg" />

CSS:

.dropdown, .dropdown > ul > li
{
    position: relative;
}

.white_layer
{
    width: 100%;
    height: 200px;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(255, 255, 255, 0.76);
    display: none;
}

.show.white_layer
{
    display: block;
}

.dropdown > ul
{
    padding: 020px;
}

.dropdown > ul > li
{
    float: left;
    margin-left: 20px;  
    text-transform: uppercase;
}

.dropdown > ul > lili
{
    text-transform: lowercase;
}

.dropdown > ul > li:first-child
{
    margin-left: 0px;    
}

.dropdownli:hover > ul
{
    display: block;
}

.dropdown > ul > li > ulul
{
    border-left: 1px solid #888;
}

.dropdown > ul > li > a
{
    display: block;
    padding: 20px10px;
}

.dropdown > ul > lia
{
    display: inline-block;
    padding: 10px0;
}

.dropdown > ulul
{
    width: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 1;
    display: none;
}

.dropdown > ul > li > ul
{
    width: 200px;
    height: 400%;
    top: 100%;
    left: 0;
}

.dropdown > ul > li > ulul
{
    height: 100%;
}

.dropdown > ul > li > ululli
{
    padding: 030px;
}

JQuery:

$(document).ready(function(){
    $('.dropdown li').hover(function(){
        if ($(this).children('ul').length > 0){    
            $('.dropdown').addClass('show');
        }
    }, function(){
        if ($('.dropdown > ul > li ul').css('display') != 'block'){ 
            $('.dropdown').removeClass('show');
        }   
    });
});

Live Example: http://jsfiddle.net/rnkLoo4x/