ドロップダウンCSSメニューを作成するにはどうすればよいですか？

カスケードスタイルシート（CSS）は、ハイパーテキストマークアップ言語（HTML）または拡張マークアップ言語（XML）ドキュメントのフォーマット方法を記述するために使用される名前です。 任意のタイプのXMLドキュメントに使用できますが、ほとんどの場合、HTMLで記述されたWebページで使用されます。 CSSを使用して、Webページにドロップダウンメニューを作成できます。 ドロップダウンCSSメニューには、訪問者がマウスを使用してメニューにカーソルを合わせるまで単一のテキスト項目が表示され、その時点で項目のリスト全体が表示されます。 メニューは、CSS識別とクラスタグを使用して作成されます。

ドロップダウンCSSメニューは、IDセレクターから始まります。 このセレクターは＃のように見えます。 IDの名前が続きます。 IDには任意の名前を付けることができますが、他の人がコードを読み取れるように説明的な名前にする必要があります。 たとえば、ドロップダウンメニューでコード＃drop1を使用できます。

ピリオドのように見えるクラスセレクターを使用して、ドロップダウンCSSメニューの最初のアイテムのクラスを作成します。 クラスはHTMLリスト要素の一部になります。 リスト要素は、文字「li」で指定されます。 「li.top」と入力して、最上位クラスを作成します。 クラスの説明は、2つの中括弧の間に含まれています。

次の例は、リストの最初のアイテムのCSSコード全体を示しています。

＃drop1 li.top {font-family：Verdana、Geneva、san-serif;
フォントサイズ：100％;
色：＃FF00FF;}

次に、CSSメニューの最初のアイテムの下に隠されるアイテムのクラスを作成します。 クラスは、文字「ul」で指定されたHTMLの順序なしリストを記述します。 説明は基本的にトップレベルのメニュー項目と同じに見えますが、説明の先頭に「display：none＃59」という単語が追加されています。 これは、ポインターがドロップダウンCSSメニューの上に移動するまで、順序付けられていないリストのアイテムが非表示になることを示します。

以下は、CSSコードのこの部分の例です。

＃drop1 ul.link {
ディスプレイ：なし＃59
フォントファミリー：ヴェルダナ、ジュネーブ、サンセリフ。
フォントサイズ：100％;
色：＃FF00FF;}

ドロップダウンCSSメニューを残りのHMTLドキュメントの上に表示する必要があります。 それ以外の場合、訪問者がメニューにカーソルを合わせると、ドキュメントの残りの部分がページの下にプッシュされ、リスト用のスペースが確保されます。 位置要素を絶対に設定すると、これが行われます。

位置を設定するコードは次のとおりです。

＃drop1 {position：absolute;}

ドロップダウンメニューのCSS部分に必要なのはそれだけです。 ドロップダウンCSSメニューの残りは、「div」、「id」、「class」、「li」、「ul」要素を使用してHTMLドキュメントに作成されます。 「div」タグは、ドキュメントのメニュー部分を区切ります。 「<div id = "drop1">」と入力して、ドロップダウンメニュー部分を作成します。 次に、HTMLの「ul」要素を使用して番号なしリストを開始します。

最初のリストアイテムにトップクラスを追加し、残りのアイテムのリンククラスを追加します。 HTMLコードは次のようになります。

<div id = "drop1">
<li class = "top">トップアイテム</ li>
<li class = "link"> <a href="#">アイテム</a> </ li>
<li class = "link"> <a href="#">アイテム</a> </ li>
<li class = "link"> <a href="#">アイテム</a> </ li>
</ ul> </ div>

Webブラウザーでドキュメントを開くと、ドロップダウンCSSメニューがページ上の単一のアイテムとして表示されます。 マウスを一番上の項目の上に移動すると、残りのメニューが表示されます。 ページ上の残りのテキストは移動しませんが、一部はメニューによって非表示になります。