ドロップダウン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 Unoderedリストについて説明します。 説明は、説明の先頭に「表示：なし＃59」という単語が追加されて、トップレベルのメニュー項目と本質的に同じように見えます。 これは、ドロップダウンCSSメニューの上にポインターがホールするまで、順序付けられていないリストのアイテムが非表示になることを示しています。
以下CSSコードのこの部分の例です：
＃drop1 ul.link {
表示：なし＃59
フォントファミリー：ヴェルダナ、ジュネーブ、サンセリフ;
フォントサイズ：100％;
色：＃ff00ff;}
hmtlドキュメントの残りの部分に表示されるドロップダウンCSSメニューが必要です。 それ以外の場合は、訪問者がメニューを越えたときに、ドキュメントの残りの部分をページの下に押して、リストのスペースを確保します。 位置要素を絶対に設定すると、これを行います。
位置を設定するコードは
です＃drop1 {位置：絶対;}
ドロップダウンメニューのCSS部分に必要なのはそれだけです。 ドロップダウンCSSメニューの残りのメニューは、「div」、「id」、「class」、「li」要素を使用してHTMLドキュメントで作成されます。 「div」タグは、ドキュメントのメニュー部分を分離します。
最初のリスト項目にトップクラスを追加し、残りのアイテムのリンククラスを追加します。 HTMLコードは次のように見える必要があります：
Webブラウザでドキュメントを開くと、ドロップダウンCSSメニューがページ上に単一のアイテムとして表示されます。 マウスを上部のアイテムに移動すると、メニューの残りの部分が表示されます。 ページ上の残りのテキストは移動しませんが、メニューによって一部が隠されます。