Html css-在父li下方显示子ul

我知道我的问题可能相当简单

我想给菜单做个悬停效果。菜单由几个相邻的链接组成，每个链接都有一个垂直的悬停下拉菜单。根据最初的研究，建议使用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>

<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>

PHP

   <?php

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

结果如下所示：

提前感谢,，

---

J

我不确定您到底想做什么，但我假设您想将下拉菜单移到菜单下方（y轴上）<代码>z索引将在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;
}

我会这样做：

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>

<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>

---

显然，我让您设计了这个漏洞，但您可能会看到，我最多只简化了代码，只在

中使用了
，您的HTML代码中缺少了一个结束语
。请提供完整的代码，包括列表。谢谢您的回复。我试过最高指挥部。建议的解决方案只从页面顶部添加20px，而不是从其父页面顶部添加20px，但是我会通过将其从20px更改为46%来让它工作。这只是一个静态的解决方案。是否有任何东西自动将子ul置于父li之下？