CSS のみを使用して上向きに開くドロップダウン メニューを作成するにはどうすればよいですか?

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

Pure CSS を使用すると、堅牢で視覚的に魅力的なドロップダウン メニューを作成できます。このチュートリアルでは、一般的な下向きのドロップダウン メニューの代わりに「上向き」ドロップダウン メニューを作成する手順を説明します。

最初に、純粋な CSS ドロップダウンを確立しました。下向きに開くことを除いて、要件を満たすメニュー。私たちの目標は、コードを変更してメニューを上向きに開き、それによって「ドロップアップ」メニューにすることです。

この上向きに開くには、CSS ルールを少し変更する必要があります。

解決策 1: 位置を調整する

ドロップダウン メニューのサブメニューを配置する CSS ルールに、一番下: 100% を追加します。 財産。これにより、基本的にサブメニューが親メニュー項目の下ではなく上に移動します。

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

解決策 2: ターゲット固有のサブメニュー

上向きに開く効果がすべてに適用されるのを防ぎたい場合サブメニューでは、より対象を絞った CSS ルールを使用できます。この場合、トップレベルのメニュー項目のサブメニューのみをターゲットにするようにルールを変更します。

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

解決策 3: メニューの境界線を保持する

サブメニューの位置を調整すると、メニュー項目の配置に影響が出る場合視覚的な外観を維持するには、border-bottom プロパティを追加して希望の外観を維持できます。

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

これらのソリューションのいずれかを実装すると、純粋な CSS を使用して、目的の「ドロップアップ」メニューを実現できます。ライブデモは http://jsfiddle.net/W5FWW/4/ でご覧いただけます。

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