2

質問を完全に定式化する方法がわからないので、（簡単な）例を作成したので、問題を正確に説明します：http: //jsfiddle.net/kn5GT/1/

最後の項目が下部にあり、それをホバーすると、サブメニューが他の項目と同じように表示されますが、これによりページの高さが拡張され、ブラウザーの垂直スクロールバーが表示されます。

上からではなく下から表示してページの高さを拡張するすべてのドロップダウンを作成することで、これを回避したいと思います（サブメニューの下部は終わり近くになります）。

これはCSSでのみ可能ですか、それともjsを入れる必要がありますか？

4

1 に答える 1

2

これは最善の解決策ではないかもしれませんが、css-pseudoclassの少しの助けを借りてこれを修正することができますnth-last-of-type()。

私はあなたのフィドルを修正しました（境界線は視覚的な区別を良くするためにあります）。

次のルールを追加しました。

ul>li:nth-last-of-type(-n+2)>div {
    top:auto;
    bottom: 50px;
}

奇妙なセレクターに惑わされないでください。基本的(-n+2)に、最後の2つのサブメニューが上からではなく下からポップアップします。

于 2012-07-13T08:55:51.093 に答える