CSS ドロップダウン メニューをドロップアップ メニューに変換するにはどうすればよいですか?

垂直ドロップダウン メニューのドロップアップ サブメニュー: 純粋な CSS で実装

ドロップダウン メニューの場合、ドロップアップに変換されますメニューは、特にメニュー バーがレイアウトの下部にある場合によく使用されます。これを実現するには、CSS スタイルにいくつかの変更を加える必要があります。

質問: ドロップダウン メニューをドロップアップ メニューに変換します

指定されたドロップダウン メニュー CSS がドロップアップ メニューになるようにスタイルを変更する方法?

解決策: #menu:hover ul li:hover ul ルールを調整します。

#menu:hover ul li にbottom: 100%; 属性を追加することで実行できます。 hover ul ルールを使用してドロップアップ機能を実装します。

#menu:hover ul li:hover ul {
    position: absolute;
    margin-top: 1px;
    font: 10px;
    bottom: 100%;
}

オプションの改善: トップレベルのサブメニューにのみドロップアップを適用します

サブメニューにもドロップアップが適用されないようにするには効果を得るために、次のルールを追加できます。

#menu>ul>li:hover>ul {
    bottom: 100%;
}

その他の考慮事項: 境界線の復元

bottom: 100% 属性を追加すると、境界線が削除される可能性があります。サブメニュー。境界線を復元するには、次の属性を追加できます:

#menu>ul>li:hover>ul {
    bottom: 100%;
    border-bottom: 1px solid transparent
}

デモンストレーション

このテクニックを示す例をいくつか示します:

• [デモ1](https://jsfiddle.net/W5FWW/4/)
• [デモ 2](https://jsfiddle.net/zyp6c/)
• [デモ 3](https ://jsfiddle.net/phkj20zo/)

以上がCSS ドロップダウン メニューをドロップアップ メニューに変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。