隠し要素：このdivはページ上部に固定されているヘッダー分コンテンツが見れなくなってしまうのを防ぐため作成されています。

あいまいワード検索
ここに調べたい内容を書き、クリックするとこのサイト全体で検索してくれます。 Google検索のシステムを使っているので検索結果の更新には時間がかかります。

1.PC用のメニューのサンプル

See the Pen PC用メニュー(ホバー) by tetra-mix (@tetra-mix) on CodePen.

2.スマホ用のメニューのサンプル

See the Pen スマホ用メニュー(ホバー) by tetra-mix (@tetra-mix) on CodePen.

解説

まず一つ目のプログラムは"PC用のメニュー"、二つ目のプログラムは"スマホ用のメニュー"をもとに変更しています。 しかし、このようなホバーでもう一段階表示するプログラムは同じ部分でできています。cssでは"以下２段目ホバー"より下が共通している部分です。HTMLではどちらの プログラムもliの中にulを入れています。

Back Home