0

http://www.designchemical.comのjquery Vertical Mega メニューを使用し ています。ページが読み込まれると、最初にレンダリング時にすべてのメニュー (サブメニューを含む) が一瞬表示され、その後サブメニューが消えて次のようになります。通常の垂直メニュー。

水平メガメニューに指定された以下のソリューションを使用してみましたが、うまくいきません...

#mega-1 li ul {
    display: none;
}

#mega-1 .sub ul {
    display: block;
}

それを機能させる方法を提案してください

htmlコード

<ul id="mega-1" class="mega-menu">
    <li><a href="#">Menu Item A</a>
        <ul>
            <li><a href="#">Sub-Header 1</a>
                <ul>
                    <li><a href="#">Menu Link</a></li>
                    <li><a href="#">Menu Link</a></li>
                    <li><a href="#">Menu Link</a></li>
                </ul>
            </li>
            <li><a href="#">Sub-Header 2</a>
                <ul>
                    <li><a href="#">Menu Link</a></li>
                    <li><a href="#">Menu Link</a></li>
                    <li><a href="#">Menu Link</a></li>
                </ul>
            </li>
            <li><a href="#">Sub-Header 3</a>
                <ul>
                    <li><a href="#">Menu Link</a></li>
                    <li><a href="#">Menu Link</a></li>
                    <li><a href="#">Menu Link</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
4

1 に答える 1

0

デバッグするページを見ないと、100%確実とは言えませんが、次のように想像できます...

コンテンツのジャンプを回避するには、ネストされた UL が CSS で非表示になっていることを確認し、JavaScript に依存してサブメニューを非表示にしないようにします。Firebug または Chrome を使用している場合は、JavaScript を無効にしてコードを調べ、display:none; を上書きするスタイルがないことを確認してください。メニュー項目 A の直下にある最初の UL で。

また、#menu .sub ul { display: block; }2 番目のレベルでネストされた UL をブロック要素のままにすることが目的である場合は、LI の親から .sub クラスが欠落しているため、.sub のクラスをサブヘッダー LI に追加します。

于 2013-03-12T13:50:10.197 に答える