HOw can I make the Sub-menu in Fusion Mega Menu on

Question

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 over "Expertise" and then "Families & Individuals" -- the sub-menu appears on the right with a line separator.

Now have a look at development:

Development site

When you hover over "Expertise" you will see that all sub-menus show up which makes the mega menu container far too long.

I am 99.9% certain I am going to have to write some JQuery to make the menu hover portion work, but how do I style that menu to make the sub-menu show up the way it does in production?

Unfortunately I cannot post code as the style sheet is HUGE and the menu stuff is sprinkled throughout it by the theme developer.

Any tips, suggestions or ideas?

ADDED COMMENT/QUESTION: I wrote some JQuery to make the items show/hide as desired, but I cannot get the sub-menu to show the way I want. I have tried what was given in the first answer and it doesn't work for me. I am able to push the sub-menu to the right, so I know my CSS is selecting the right node, but I can't, for instance, make the list style go away so there are no arrows. Any ideas on how to match these two menus?

Answer 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:

<div class="dropdown">
    <ul>
        <li>
            <a href="#">level1-link1</a>
        </li>
        <li>
            <a href="#">level1-link2</a>
            <ul>
                <li>
                    <a href="#">level2-link1</a>
                </li>
                <li>
                    <a href="#">level2-link2</a>
                    <ul>
                        <li>
                            <a href="#">level3-link1</a>
                        </li>
                        <li>
                            <a href="#">level3-link2</a>
                            <ul>
                                <li>
                                    <a href="#">level4-link1</a>
                                </li>
                                <li>
                                    <a href="#">level4-link2</a>
                                </li>
                            </ul>    
                        </li>
                    </ul>    
                </li>
            </ul>    
        </li>
        <li>
            <a href="#">level1-link3</a>
        </li>
        <li>
            <a href="#">level1-link4</a>
        </li>
        <div class="clear"></div>
    </ul>
    <div class="white_layer"></div>
</div>    
<img src="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: 0 20px;
}

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

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

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

.dropdown li:hover > ul
{
    display: block;
}

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

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

.dropdown > ul > li a
{
    display: inline-block;
    padding: 10px 0;
}

.dropdown > ul ul
{
    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 > ul ul
{
    height: 100%;
}

.dropdown > ul > li > ul ul li
{
    padding: 0 30px;
}

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/