How can I keep my sub-menu open in jQuery hover menu - please check sample

Question

You can see sample code from here Sample code

The Goal:

1. When top menu hover, top menu and sub menu must open
2. when sub menu hover, top menu and sub menu must stay opened
3. when mouse out both top menu and submenu menus must close

I tried many times and searched for solutions but cant achieve.

Also I cant put sub menu under a element. Because when a shrinks(gets wither) the sub menu relatively changes its position. It's not compatible for me.

                <div class="menu-item"><a href="index.html"><i class="halflings white cog"></i> <span>Link One</span></a>
                    <div style="height:0;position:absolute;">
                    <div class="sub-menu" data-hover='false'>
                        <div>Sub Link</div>
                        <div>Sub Link</div>
                        <div>Sub Link</div>
                        <div>Sub Link</div>
                    </div>  
                    </div>
                </div>

Answer 1

You are using closing sub-menu's code:

 $(this).parent().find('.sub-menu').css({display: "none"})
 .stop(true, false).animate({width:'0',height:'0',opacity:1},'fast');

in the wrong place. You can close it just after hover is false (like is in the another hover function). Then, invert this 'if' logic:

if(!$(this).parent().find('.sub-menu').data('hover'))

to:

if($(this).parent().find('.sub-menu').data('hover'))

and for end just add this 'if' after the another 'if':

if(!$(this).parent().find('.sub-menu').is(':visible')){
    $(this).stop(true, false).animate({width:'15px'},'fast');                    
}

Here is the fiddle: http://jsfiddle.net/a8yZb/52/

Answer 2

Finally I solved this issue, by using these functions:

setTimeout(); 
clearTimeout();

The solution is here: http://jsfiddle.net/a8yZb/55/