《CSS》ドロップダウン・メニューを作ってみよう！

こんにちは、「なゆた」です！
今回は皆さんに、「CSS」での「ドロップダウン・メニュー」の作り方をお教えします！
僕、このメニューを作る課題をやった時、非常に苦労しました・・・。おそらく、今までで一番苦労した課題でした・・・。

①まずはHTMLを準備します。navタグを最初に入れ、次にメニューを統括するulタグ、その中にliタグとaタグを使って項目を入れます。さらに項目内にnavChildクラスを入れます。さあ、それができたらCSSファイルと連携です！

②CSSファイルを作ったら、まずnavタグの設定です。これらを入れれば、メニューがいい位置につきます。

③続いて「親メニュー」ことulタグ内のnavクラスの設定です。まずは最初の項目だけを違う色にする「first-child」を作ります。hoverとは、「カーソルを合わせた時の反応」を意味します。幅と高さ、色は好きにしてください。「＞」はタグ内にある「子供」を意味します！

④今度は「first-child」以外の親メニューを設定します。「first-child」と入れなければ、最初の項目以外おんなじ色になります。色は好きにしていいですが、幅と高さは「first-child」と同様にしてください。

⑤次に、「子メニュー」ことliタグ内のnavChildクラスの設定です。親項目にカーソルを合わせて出てきた時と、子項目にカーソルを合わせて色が変わった時を同時に作ります。どちらもhoverを付けないと、カーソルを合わせても子メニューが出てきません。

⑥完成です！

いかがでしたか？説明オンチですみませんでしたが、ぜひ参考にしてみてください！
以上です、ありがとうございました！