Html 如何在标题中对下拉菜单进行z索引？

我正试图在顶部标题的右侧添加一个下拉菜单，但我遇到了“下拉菜单”的问题。标题跟随菜单，因此它包括导航，并按照菜单的功能向下移动。 我认为问题与我没有正确设置的z-索引有关，但我不太确定

我想在标题中有一个下拉菜单，后面没有标题本身

这是收割台的右侧

    <div class="rightHeader">
            <div class="rightContainer">
                <div class="profile-nav">
                    <nav>
                        <ul>
                            <li><h3> <a href="profile.html"> edo1493</a></h3>
                                <ul>
                                    <li><a href="#"> Notifications </a></li>
                                    <li><a href="#"> Messages </a></li>
                                    <li><a href="#"> Settings </a></li>
                                    <li><a href="#"> Log out </a></li>
                                </ul>

                            </li>
                        </ul>
                    </nav>

                </div>
            </div>
        </div>

有什么建议吗

这是标题的CSS：

#header-new{ position:fixed; width:100%; top: 0; left:0px; background-color:#3b3b3b;z-index: 1;}

---

谢谢

这将通过一个简单的更改来实现（添加位置：绝对）：

这将允许导航下降到收割台下方，而不是将其与收割台一起拉动

见示例：

---

请参阅：有关定位的更多信息

我刚刚尝试过，它正在使用您的代码。我认为您想要集成它的其他代码有问题。在JSFIDLE上查看：如果在rightHeader类周围添加div“header new”，它将不起作用。这就是我正在努力解决的问题。您可以使用z-index在堆栈中移动元素。具有较高堆栈顺序的元素始终位于具有较低堆栈顺序的元素的前面。因此，您可以增加z索引并使元素显示在其他元素前面。通常，菜单选项具有更高的z索引值。但是，请记住，它只适用于position:absolute、position:relative或position:fixed.Yes，但是如果我给“.righheader.righcontainer.profile nav nav ul”一个z索引为10的相对位置（header的z索引为1），它仍然不能实现我的预期。我不明白它为什么不起作用\

#header-new{ position:fixed; width:100%; top: 0; left:0px; background-color:#3b3b3b;z-index: 1;}

.rightHeader .rightContainer .profile-nav nav ul ul{
    position:absolute;
    display: none;
    background-color: yellow;
}