如何在页眉中为下拉菜单建立索引？

Question

我试图在顶部标题的右侧添加一个下拉菜单，但是“下拉菜单”出现问题。 标头跟随菜单，因此它包含导航并向下移动，跟随菜单应该执行的操作。 我认为问题与我未正确设置的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：

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

.rightHeader .rightContainer .profile-nav nav ul li:hover> ul {
display: block;
}

.rightHeader .rightContainer .profile-nav nav ul {
list-style-type: none;
display: inline-table;
padding: 0;
margin: 0;  
}

.rightHeader .rightContainer .profile-nav nav ul:after {
content: ""; clear: both; display: block;
}

有什么建议吗？

这是标题的CSS：

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

谢谢

Answer 1

这将通过一个简单的更改（添加position：absolute ）来完成：

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

然后，这将使导航位于标题下方，而不是随标题一起拉。

参见示例： http : //jsfiddle.net/ZgzXE/12/

有关定位的更多信息，请参见： http : //www.w3schools.com/css/css_positioning.asp