メニューバーを改造してみた

こんにちは、朱夏です。

前回作成したメニューを改造していきたいと思います。
HTMLはそのまま、CSS側を色々追加していきます。

まずはマウスを合わせたときに背景色が変わる様に変更。
こんな感じのCSSを追加。

上手く行きました。
次に、文字色も変えてみます。

見た目は変わりませんが、マウスを合わせると、文字色が白くなるようになりました。
次は背景色が変わる範囲を調節してみます。

それから、前回記載したクラスに追記をします。

これを反映させてみると・・・

それっぽいものが出来ました。
今回はこの辺にします。
次回は、メニューをもうちょっといじって、サブメニューが展開したりするようにしてみたいと思います。