Как сохранить div видимым при зависании другого div

Question

Я нашел несколько похожих тем здесь после хорошего поиска, но никто из них не был в той же ситуации, что и я, поэтому я решил спросить.

Я получил это раскрывающееся меню, которое получает высоту 460 пикселей, когда я нависаю над вкладкой и теряю высоту, когда она не находится в движении. Мне нужно, чтобы меню оставалось там, даже когда мышь перемещается со вкладки в меню.

Как это: http://jsfiddle.net/muo4ypvc/

Я могу сделать это, установив положение меню на относительна, однако мне нужно место, чтобы быть абсолютным для того, чтобы отрегулировать Z-индекс.

Когда я пытаюсь установить абсолютное положение, меню не будет удерживать высоту 460 пикселей при наведении курсора, она имеет только высоту, когда вкладка зависает. Я также пробовал некоторые другие вещи, такие как обертывание всего 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/