1

私が作成した非常に単純なナビゲーション要素があります。

Chrome と Safari では問題なく表示されますが、Firefox で表示すると、[バージョン情報] にカーソルを合わせると、ナビゲーションの非表示の部分が「ジャンプ」することに気付きました。CSSリセットを使用しています。

HTML:

<nav>
    <ul class="menu">
        <li>
            <a>About</a>
            <ul class="sub-menu">
                <li><a>People</a></li>
                <li><a>Approach</a></li>
            </ul>
        </li>
        <li><a>Projects</a></li>
        <li><a>Contact</a></li>
    </ul>
</nav>

CSS : 

nav li {
    display: inline-block;
    font-size: 10px;
    height: 10px;
    margin-right: 16px;
    text-transform: uppercase;
}

.sub-menu {
    display: inline-block;
    white-space: nowrap;
}​

JS:

$('.sub-menu').hide();

$('nav > ul > li').on({
    mouseenter: function() {
        $(this).find('ul.sub-menu').stop().animate({width: 'toggle'});
    },
    mouseleave: function(){
        $(this).find('ul.sub-menu').stop().animate({width: 'toggle'});
    }
});

フィドル: http://jsfiddle.net/HYPX8/

スクリーンショット:

ここに画像の説明を入力

justinlineを使用してみましたが、同じことが起こります。

私はfloat: leftすべてのli要素を使用しようとしましたが、折りたたみ.sub-menuの子li要素で問題が発生しました.sub-menumouseleave

誰でもこの問題を修正する方法を推奨できますか? ありがとう！

4

1 に答える 1

1

編集 0

コメントアウトし$('.sub-menu').hide();て幅を切り替えると、JQuery が CSS を変更する方法に問題があることがわかります。これは、ロード時に正しくレンダリングされるためです。私はそれをさらに調査します。

また、幅を高さに変更すると、使用したいものが生成されます。ここを参照してください: http://jsfiddle.net/HYPX8/5/。

$(this).find('.sub-menu').stop().animate({height: 'toggle'});

ソリューション例: http://jsfiddle.net/HYPX8/2/ .

CSSに以下を追加すると、.sub-menuそのドロップが発生しなくなるようです。

height: 10px;
margin-right: 16px;

あなたが本当にしたいのであれば、CSSを組み合わせることができるように見えますが、左側に少しパディングが追加されます.

nav li, .sub-menu {
    display: inline-block;
    font-size: 10px;
    height: 10px;
    margin-right: 16px;
    text-transform: uppercase;
}

ただし、目的の結果を得るには、次のものが必要です。

.sub-menu {
    display: inline-block;
    height: 10px;
    margin-right: 16px;
    white-space: nowrap;
}
于 2012-12-13T01:40:48.883 に答える