css - show child ul below parent li

Question

I am aware that my question could be rather simple.

I'm trying to make a hover effect for a menu. The menu consists of several links next to each other, with a vertical drop down on hover for each one. From initial research it was recommended to make use of the z-index however this only shows the child ul underneath the parent li.

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");
?>

The result is shown below:

Thanks in advance, J

Answer 1

I'm not sure exactly what you're trying to do, but I assume you want to move the drop down underneath (on the y-axis ) the menu. z-index will move it underneath in the z-axis (ie "deeper" into the page).

To move it further down on the y-axis, try something like:

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

Now top moves the element 20px relative to the first positioned parent. So you need to make sure that your container also has a position set:

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

Answer 2

Here is how I would do : 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;
}

Obviously I let you stylish the hole, but you might see I simplify the code at best, using only <span> within <ul class="parent-item"> .