純粋な CSS ドロップダウン メニューを下方向ではなく上方向に開くにはどうすればよいですか?

純粋な CSS で上に開くドロップダウン メニュー

純粋な CSS ドロップダウン メニューは、Web サイトを直感的に移動するための優れた方法です。ただし、デザインによっては、メニューを下ではなく上に開くことが必要な場合があります。 CSS だけでこれを実現する方法は次のとおりです:

問題:
下に開く CSS のドロップダウン メニューがありますが、それを上に開くように変更したいと考えています。

解決策:
ドロップダウン メニューが上向きに開く場合は、サブメニューを配置する CSS ルールを変更する必要があります。方法は次のとおりです:

オプション 1: マージンの上端を調整します

#menu:hover ul li:hover ul {
  ...
  margin-top: -22px;
}

次のように変更します:

#menu:hover ul li:hover ul {
  ...
  margin-top: 1px;
  bottom: 100%;
}

下端を追加: 100 %;、サブメニューを親メニューの上に強制的に表示します。 item.

オプション 2: 特定のサブメニューをターゲットにする

すべてのサブメニューを上向きに開きたくない場合は、次のルールを使用して特定のサブメニューをターゲットにすることができます:

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

オプション 3: 代替デモ

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

この代替アプローチでは、境界線が維持されます。 submenu.

これらの CSS 変更を実装すると、下向きの純粋な CSS ドロップダウン メニューを上向きのメニューに簡単に変換できます。デザインに合わせて、必要に応じて余白の値を忘れずに調整してください。

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