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

Question

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

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

Answer 2

这是我的方法： 可编辑的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;
}

显然，我让您设计了一个漂亮的漏洞，但您可能会看到，我最多只使用<ul class="parent-item"> <span>简化了代码。