css - показать ребенка ul ниже родителя li

Question

Я знаю, что мой вопрос может быть довольно простым.

Я пытаюсь сделать эффект зависания для меню. Меню состоит из нескольких ссылок рядом друг с другом, с вертикальным выпадающим паром для каждого из них. Из первоначальных исследований было рекомендовано использовать z-индекс, однако это показывает только дочернюю ul под родительским ли.

HTML

<div class="container"> 
     <?php require 'lists.php'; ?> 
     <nav class="parent-container"> 
     <ul class="parent-list"> 
       <li class="parent-item"> 
        parent li 
        <div class="child-container"> 
         <ul> 
          <li> 
           This is sub li 
          </li> 
         </ul> 
        </div> 
       </li> 
      <?php }?> 
     </ul> 
    </div> 

CSS

/*********/ 
/*General*/ 
/*********/ 
.container{ 
    margin: auto; 
    background-color: #dce0e2; 
    height:80%; 
    width:80%; 
} 

/*************/ 
/*Parent item*/ 
/*************/ 
.parent-container{ 
    display:block; 
} 

.parent-list{ 
    list-style: none; 
    margin-top:30%; 
    margin-right:auto; 
    margin-left:auto; 
    display:block; 
} 

.parent-item{ 
    font-family: "Open Sans"; 
    font-weight:400; 
    float:left; 
    border-right: 1px solid #949494; 
    display:block; 

} 

.parent-item:last-of-type{ 
    border-right:none; 
} 

.parent-item a:link, 
.parent-item a:visited{ 
     text-decoration: none; 
     color: #949494; 
     float:left; 
     margin-right: 5px; 
     margin-left:5px; 
} 

/*******************/ 
/*Parent item hover*/ 
/*******************/ 

.parent-item:hover{ 
    background-color:#8ec1f9; 
    transition: all 100ms ease; 
} 

.parent-item: hover a{ 
     text-decoration: underline;; 
} 

/*****************/ 
/*Child container*/ 
/*****************/ 
.child-container{ 
    visibility:hidden; 
    display: block; 
    position: absolute; 
    border: 1px solid #000; 
} 

.parent-item:hover .child-container{ 
    visibility: visible; 
    display: block; 
    list-style:none; 
    position: absolute; 
    z-index:-2; 
} 
/*****************/ 
/*Child item*/ 
/*****************/ 
.child-item{ 
    font-family: "Open Sans"; 
    font-weight:200; 
    list-style: none; 
    width:auto; 
    margin:auto; 

} 



/*****************/ 
/*room title*/ 
/*****************/ 

.room-title{ 
    font-family:"Open Sans", sans-serif; 
    font-size:120%; 
    font-weight:500; 
} 

PHP

<?php 

$levels=array(
     "Level 1", 
     "Level 2", 
     "Level 3", 
     "Level 4", 
     "Level 5", 
     "Level 6", 
     "Level 7", 
     "Level 8", 
     "Level 9"); 
?> 

Результат показан ниже:

Спасибо заранее, J

Answer 1

Я не знаю точно, что вы пытаетесь сделать, но я предполагаю, что вы хотите, чтобы переместить падение вниз под (на y- ось) меню. z-index будет перемещать его под ось (т. Е. «Глубже» на странице).

Чтобы переместить его дальше вниз по оси у, попробовать что-то вроде:

.parent-item:hover .child-container{ 
    visibility: visible; 
    display: block; 
    list-style:none; 
    position: absolute; 

    top:20px; 
} 

Теперь top перемещает элемент 20px относительно первого расположен родителя. Таким образом, вы должны убедиться, что ваш контейнер также имеет набор позиции:

.parent-item{ 
    font-family: "Open Sans"; 
    font-weight:400; 
    float:left; 
    border-right: 1px solid #949494; 
    display:block; 
    position:relative; 
} 

Answer 2

Вот как я хотел бы сделать: Editable JSFiddle

HTML

<div class="container"> 
    <nav class="parent-container"> 
     <ul class="parent-list"> 
      <li class="parent-item"> 
       Level 1 
       <span class="child-item">is is sub li</span> 
      </li> 
      <li class="parent-item"> 
       Level 2 
       <span class="child-item">is is sub li</span> 
      </li> 
      <li class="parent-item"> 
       Level 3 
       <span class="child-item">is is sub li</span> 
      </li> 
     </ul> 
    </nav> 
</div> 

CSS

.parent-list { 
    list-style-type : none; 
    margin : 0; 
    padding : 0; 
} 

.parent-item { 
    display : inline-block; 
    color : grey; 
    border : solid 1px transparent; 
    font-family : Arial, sans-serif; 
} 

.child-item { 
    display : none; 
} 

.parent-item:hover { 
    border : solid 1px black; 
    color : black; 
    background-color : lightblue; 
    cursor : pointer; 
} 

.parent-item:hover > .child-item { 
    display : inline-block; 
    background-color : white; 
    cursor : pointer; 
} 

Очевидно, я позволяю вам стирать отверстие, но вы можете увидеть, что я упрощаю код в лучшем случае, используя только <span> в пределах <ul class="parent-item">.