ドロップダウン メニューの代わりに CSS ドロップアップ メニューを作成するにはどうすればよいですか?

純粋な CSS を使用したドロップダウン メニュー

この記事では、純粋な CSS で作成されたドロップダウン メニューをカスタマイズして、 「ドロップダウン」メニューではなく「ドロップアップ」メニュー。メニューバーはレイアウトの下部にあり、どうやって上に開くようにするかが問題です。

解決策

ドロップアップメニューを作成するには、 CSS ルールを調整する必要があります。

デモ1:

下を追加: 100%;既存の CSS ルール:

#menu:hover ul li:hover ul {
    bottom: 100%; /* added this attribute */
}

デモ 2:

サブメニューがドロップアップ動作の影響を受けないようにするには、次のルールを使用します:

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

デモ3:

ドロップアップ メニューの周囲の境界線を復元するには:

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

JSFiddle のデモは次のとおりです: http://jsfiddle.net/W5FWW/4/

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