Как сделать div слайд прямо за другим?

Question

Мне нужно создать меню, когда пользователь наводит ссылку на меню, которое является категорией подкатегорий div, должен скользить прямо за меню. Но подкатегории divs накладывают категории div. Как заставить их отказаться от меню?

HTML

<div class="categories3"> 
    <div class="parent3"> 
     <a href="http://test.app:8000/category/asperiores-impedit"> Asperiores impedit. <span class="caret-right"></span></a> 
     <div class="subcategory3"> 
      <a href="http://test.app:8000/category/illum-est"> Illum est. 1</a> 
     </div> 
    </div> 
    <div class="parent3"> 
     <a href="http://test.app:8000/category/asperiores-impedit"> Asperiores impedit. <span class="caret-right"></span></a> 
     <div class="subcategory3"> 
      <a href="http://test.app:8000/category/illum-est"> Illum est. 2</a> 
     </div> 
    </div> 
</div> 

JQuery

$('.parent3').hover(function(e) { 
    e.stopPropagation(); 
    $(this).children('.subcategory3').animate({ 
     left: "100%" 
    }, 300); 

}, function(e) { 
    e.stopPropagation(); 
    $(this).children('.subcategory3').animate({ 
     left: "0" 
    }, 300);  
}); 

CSS

.categories3 { 
    position: relative; 
    border: 1px solid #009688; 
    background-color: #fff; 
} 

.subcategory3 { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    top: 0; 
    height: 100%; 
    background-color: #fff; 
    padding: 10px; 
    border: 1px solid #009688; 
} 

.parent3 a { 
    display: block; 
    padding: 10px; 
} 

.parent3 a:hover { 
    background-color: #009688; 
    color: #fff; 
} 

Answer 1

По умолчанию элементы, которые приходят позже в DOM появляются "над" любой до него, если есть перекрытие , Вы можете переопределить это, установив z-index (свойство CSS) элементов. Дайте те, которые вы хотите «ниже», чтобы иметь более низкий индекс z, и те, которые вы хотите «выше», иметь большее число.

Я сделал скрипку здесь: http://jsfiddle.net/to84v4qr/1/ с некоторыми дополнительными незначительными изменениями CSS и JS в ваш код, чтобы попытаться сделать какое-то визуальное ощущение вещей. Но основные изменения следующие дополнения к CSS:

.subcategory3{ 
    ... 
    z-index: 1; 
} 
... 
.parent3 a{ 
    position: relative; 
    z-index: 2; 
    ... 
} 

position: relative на .parent3 a, поскольку г-индекс не работает на unpositioned элементов (ну, «статические», по умолчанию). subcategory3 уже было абсолютное позиционирование.