悬停另一个div时如何保持div可见

Question

I found a few similar threads here after a good while of searching, but none of them was in the same situation as me, so i decided to ask.

I got this drop-down menu that gets the height 460px when i hover over a tab, and loses the height when unhovered. I need the menu to stay there even when the mouse is moved from the tab over to the menu.

Like this: http://jsfiddle.net/muo4ypvc/

I can accomplish this by setting the menu position to relative, however i need the position to be absolute in order to adjust the z-index.

When i try to set the position to absolute, the menu won't keep the 460px height on hover, it only has the height when the tab is hovered. I've also tried some other things like wrapping all the html in a container, and put that as the mouseleave element, but with no success. How can i make it stay on both tab and menu hover?

html

 <div id="tab">

        <a id="tab">Categories</a>

            <div id="menuDropdown">

                <div id="innerDropdown">

                    <!-- menu content -->

                </div>
            </div>
        </div>

js

$(document).ready(function() {

    var inner = $('#innerDropdown')
    var rolldown = $('#menuDropdown');

    $('#tab').mouseenter(function() {
        rolldown.toggleClass('show');

        if(rolldown.hasClass('show'));
            setTimeout(showInner, 130); /* waits 'til drop-down animation is finished */

        function showInner(){
        inner.toggleClass('show');
        }
    });

$('#tab').mouseleave(function() {
        inner.toggleClass('show');
        rolldown.toggleClass('show');
    });
}); 

css

#menuDropdown {
  position: absolute;
  transition: (some long ass transition code);  
}

#menuDropdown.show {
    height: 460px;
}

#menuDropdown.hide {
    height: 0px;
}

#innerDropdown.show {
    display: block;
    animation: fadein .15s;
}

Answer 1

I wrapped your html into another div to show that the wrapper keeps its height, but I'm not sure I understand what you're trying to do and what doesn't work. I basically just added position: absolute :

.description {
    position: absolute;
}

See demo: http://jsfiddle.net/4tb29u6h/1/