グローバルメニューを、カテゴリ別に色分けし、カテゴリの下に丸をつける方法

一つ目の質問の画像
https://goo.gl/6pHhmC

二つ目の質問の画像
https://goo.gl/z8ihBg

セレクタ::before、あるいは::afterを使ってできますよ。
サンプルはちょいと待って下さい。

意味合い的には、

サンプル: マウスホバーの時に大きくなるボーダーとその色 | codepen

こういう感じです。ただしレスポンシブにしてないのでPCの時しか効果を発揮できません。
※ サンプルを適用するともちろんPC以外でもcssが適用されてしまいます。
※ PCの時だけというのであればメディアクエリを使う必要があるでしょう
※ Simplicity公式のメニューを利用しているのでメニューアイテムが多いため折り返しが発生します。ここらの調整も必要になるかと思います。

もしレスポンシブに対応する場合は、親をマウスオーバーした時に、もしその親に子メニューがあった場合、その子メニューをどのように表示するか、タブレットの時はどのように表示するか、スマホの時はどうするか、折り返しが発生した場合はどうするか等の細かな仕様が必要です。

その場合、cssだけでは対応できないかも知れません。
現在のSimplicityのグローバルメニューをレスポンシブに対応するのは非常に難しいカスタマイズになります。

ただ、どうやって実現するか等については原理としてはサンプルのような感じで可能です。
もちろんbefore,afterを使わなくても、jQueryでblockを挿入する、あるいはphpにてメニューを予めカスタマイズしてブロックを挿入しておくことでも実現可能です。

Hidekichi様
わいひら様

ありがとうございます。
とりあえずは勉強がてらPCメインで考えているので、大丈夫です。

大変初歩的な質問で申し訳ないのですが、Hidekichi様が書かれたCSSはスタイルシートにコピーですよね？
htmlはどうのようにすれば良いのでしょうか。

念のため、実行したこと以下に書きます。（Simplicity 2.1 安定版・Simplicity2子テーマ使用・テスト用に作ったブログで行ったため、アレンジ等は一切なし）

・スタイルシートにHidekichi様が書いたcssをコピー
・navi.phpにhtmlをコピー（それぞれのページのリンクはテストブログ用に変更）

以上を行ったのですが、グローバルメニューが増えただけで、デザイン・色共に変化なしでした。

どうぞよろしくお願いいたします。

ゆう

p.s.

サンプルはscssで書いてあるのでcss欄のview compiledを押してcssに変換したものをコピペですが、このままだと他の環境(タブレットやスマホ)でも、影響が出ると思います。

@media screen and(min-width: 1000px) {
  //ここにcssを入れる
}

などとして、1000px以上の画面幅がある端末だけ適用するというような仕組みが必要です。
htmlは何も変更する必要はありません。cssだけでサンプルのようになります。そのままで良ければですが(笑)

ありがとうございます。
おかげさまで、理想通りのメニューになりました。

一応、macの13インチ・windows・iPhone6・xperia　Ｍで確認したのですが、問題なく表示されました。
特に問題はありませんでした。

ご丁寧にありがとうございました。

ゆう