0

我正在尝试在顶部标题的右侧添加一个下拉菜单，但我遇到了“下拉内容”的问题。标头跟随菜单，因此它包括导航并向下，跟随菜单应该做的事情。我认为这个问题与我没有正确设置的 z-indexes 有关，但我不太确定。

我想在标题中有一个下拉菜单，而不是标题本身。

这是页眉的右侧。

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

谢谢

4

1 回答 1

0

这将通过一个简单的更改来完成（添加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

于 2014-10-30T13:35:35.763 回答