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

Question

经过一段时间的搜索后，我在这里发现了一些类似的线程，但它们中没有一个和我一样，所以我决定问。

我得到了这个下拉菜单，当我悬停在选项卡上时，它的高度为460 and，而当我没有悬停时，它就失去了高度。我需要菜单停留在那里，即使当鼠标从标签移动到菜单。

像这样：http://jsfiddle.net/muo4ypvc/

我可以通过将菜单位置设置为相对位置来实现这一点，但是为了调整z索引，我需要这个位置是绝对的。

当我试图将位置设置为绝对时，菜单将不会保持460 is高度悬停，只有在选项卡被悬停时它才有高度。我还尝试过其他一些方法，比如将所有html封装在一个容器中，并将其作为mouseleave元素，但没有成功。如何使它同时停留在选项卡和菜单上？

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

我将您的html封装到另一个div中，以显示包装器保持其高度，但我不确定我是否理解您要做什么和什么不工作。我刚加了position: absolute

.description {
    position: absolute;
}

参见演示：http://jsfiddle.net/4tb29u6h/1/