【Rails】CSS初心者だけどドロップダウン付きのメニューバーを簡単に作りたい

現在4日連続くらいで更新してるみたいなので、
せっかくだから今日も更新します。

これを読みました。
すごく簡単そうだったので、キャッチアップも兼ねて、
これで生成されたCSSをベースに、
Railsで自作しているタスク管理ツールのメニューバーを改造してみることにしました*1。

詳細はQiitaをご参照ください。

上記で生成されたCSSに、

#cssmenu > ul li {
  hogehoge
}
#cssmenu > ul > li {
  foofoo
}

みたいなのがあったのですが、
これらのセレクタが指定している要素の違いが分からなかったのでググりました。

4. E F　（子孫要素に適用）
セレクタを半角スペースで区切ると、ある要素の下の階層にある要素にスタイルを適用します。

5. E > F　（子要素にのみ適用）
セレクタを「>」で区切ると、ある要素の直下の階層にある要素にスタイルを適用します。

なるほどー。
半角スペース区切りだと、その下にある要素全てが対象になって、
山括弧(>)を付けると、その直下の要素のみが対象になるのか。

CSSをちゃんと勉強したことがないので、今更こんなことを学んだりもしてます。
初心者丸出しですね。

こんな初心者丸出しのことはQiitaには書けないのでこっちに書きます。

終わり。

*1:改造前はtable使ってました。ドロップダウンはjQueryで書いてました。

16bit!