0

3 レベルのドロップダウン メニューを作成したサイトを作成しました。IE8 を除いて、これまでにテストしたすべてのブラウザーですべてがうまく機能しています。IE8 では、最上位レベルのボタンにカーソルを合わせると、ドロップダウン メニューが表示されます。その下に子ページがあるセカンダリ ページにマウス カーソルを合わせると、メニューが親ページの右側に表示される必要があります。これは、Chrome、Firefox、Safari、および IE9+ で行われます。

誰かがサイトを見て、何かアイデアがあれば教えてくれることを願っていました.

http://sightlines.quantumdynamix.net/

"Who We Are" と "Our Team" にカーソルを合わせると、第 3 レベルのメニューが表示されますが、IE8 では表示されません。

以下は、第 3 レベルのメニューを表示する CSS です。

#mainNavContainer .sub-menu li:hover > div > .sub-menu {
        display: block;
}

メニュー コードは次のとおりです (これにはメニュー全体が必要ないため、省略されています)。授業量が多くて申し訳ありませんが、Wordpressのメニューです。

<div id="mainNavContainer">
    <div class="menu-main-menu-container">
        <ul id="menu-main-menu" class="menu">
            <li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-first has_children menu-item-72">
                <a href="/who-we-are/">Who We Are</a>
                <div class="sub-menu-container">
                    <ul class="sub-menu">
                        <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73">
                            <a href="/who-we-are/our-story/">Our Story</a>
                        </li>
                        <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page has_children menu-item-74">
                            <a href="/who-we-are/our-team/">Our Team</a>
                            <div class="sub-menu-container">
                                <ul class="sub-menu">
                                    <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75">
                                        <a href="/who-we-are/our-team/executive-team/">Executive Team</a>
                                    </li>
                                    <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76">
                                        <a href="/who-we-are/our-team/leadership-team/">Leadership Team</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

これが何が起こっているかのスクリーンショットです。青いボックスは IE8 の Dev Tools から生成されたもので、ブラウザーがサブメニューの場所を認識していることを示していますが、[Our Team] にカーソルを合わせると表示されません。

例

4

2 に答える 2

1

この CSS の行がエラーの原因でした:

filter:progid:DXImageTransform.Microsoft.Shadow(strength=2, direction=135, color=#444444);

IE8 の開発ツールでサイトを表示すると、その行は次のように表示されます。

filter:progid:DXImageTransform.Microsoft.Shadow(strength=2, direction=135, color=#444444); BORDER-LEFT: #d5d5d5 1px solid

これに変更を加えたので、完全なリストを戻すことはできませんが、もともと BORDER-LEFT 以外の多くのスタイルがフィルター行に表示されています。

フィルターの何がエラーを引き起こしているのかはわかりませんが、ie8 以前のユーザー向けにドロップ シャドウを修正することにしたため、フィルター行を削除するとすべてが修正されました。

于 2013-06-20T20:15:17.360 に答える
0

Spoon.netは有料サービスなので使えませんが、試してみてください:

#mainNavContainer .sub-menu li:hover > div > .sub-menu:hover {
    display: block;
}

そして、あなたの問題の写真を撮ってみてください。

于 2013-06-18T20:19:32.513 に答える