html - css-在父级li以下显示子ul

我知道我的问题可能很简单。

我正在尝试为菜单悬停效果。菜单由彼此相邻的几个链接组成，每个链接的垂直下拉列表均位于该菜单上。从最初的研究开始，建议使用z索引，但这仅显示了孩子ul在父母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");
?>

结果如下所示：



提前致谢，
Ĵ

最佳答案

我不确定您要做什么，但是我想您想将下拉菜单移动到y轴下方。 z-index会将其移动到z轴下方（即“更深”进入页面）。

要将其沿y轴进一步向下移动，请尝试以下操作：

.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;
}