0

トップヘッダーの右側にドロップダウンメニューを追加しようとしていますが、「ドロップダウン」に問題があります。ヘッダーはメニューに追従するため、ナビゲーションが含まれており、メニューの本来の動作に従います。問題は、適切に設定していない z-index に関連していると思いますが、よくわかりません。

ヘッダー自体が続くのではなく、ヘッダーにドロップダウン メニューが必要です。

これはヘッダーの右側です。

    <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 に答える