グローバルメニューのデザイン

ご回答有難うございます！

縦幅も長くしたいのですが、可能でしょうか？

私も縦幅の調整の方法を知りたいです。

通常だと、ulに対して縦幅を設定します。その中のliは高さ100%にします。ulにpaddingが入って無ければ、通常はメニューのそれぞれのアイテムの高さはulの高さになります。

Simplicityの場合、それだけではダメでして、aタグに色々と設定がされているので、aタグの高さも100%にする必要があります。

#navi ul {
  height: 80px; /*わかりやすいように大きめにしてます*/
}
#navi ul > li {
  height: 100%;
}
#navi ul li a {
  height: 100%;
  box-sizing: border-box; /*はみ出し防止*/
}

こんな感じで一応縦幅は変えて、マウスオーバーした部分がはみ出さず色が変わるかと思います。
しかし、これだけだと、メニュー自体が上にあってアレだと言う場合は、

#navi ul li a {
  height: 100%;
  box-sizing: border-box; /*はみ出し防止*/
  line-height: 73px;
}

あたりを入れてみて下さい。73pxは高さ80pxからフォントサイズの半分(14px/2 = 7px)を引いた数値です。ここはマニュアルでの作業なので、見た目ちょっと上のがいいかなと思えば72pxとか71pxあたりにすれば良いのではないかと思います(フォントの状態による)。若干計算よりも、上に上げたほうが真ん中っぽく見えたりします。

これ、aタグの中にspanでも入ってたら自動でできるんですけどね。

それかもうひとつ方法がありまして、マウスオーバーした時に色を変えているわけですが、これはaタグに記載してあります。これをliのバックグラウンドでするようにします。

#navi li:hover {
  background-color: #ddd;
}

そうしたらaタグに高さはいりません。
しかし、そうするとテキストしかサブメニューを表示する反応エリアがなくなりますので、ナビのhtmlの構造自体を変える必要があります。
現在は以下のような構造になってます。(以下htmlタグは[ul][/ul]のように[]で書きますので〈〉と読み替えて下さい。〈〉で書くと実際にタグとしてこのページに反映されてしまうため)

[ul]
[li]
[a](例えば)HOME[/a]
[/li]
[/ul]

これを、
[ul]
[a]
[li](例えば)HOME[/li]
[/a]
[/ul]

こうすることで、li全体が反応エリアになります。それをしてしまうとcssがちょっと変わるので、構造自体をよく理解して新たに設定していかねばなりませんが、おそらくそうするのが良いと僕は思います。

この手法をとった時には、ついでに[li]の中に[span class=’itemText’]メニュー名[/span]を入れて下さい。そうすれば、

.itemText{
  display: block;
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
}

これで縦中央にメニューが自動で入ります。transformはベンダープレフィックスが必要です。最近のブラウザだと要らないと思うんですけれども。

横道にそれました。話を戻します。
先ほど#navi ulに高さを入れました。そうするとサブメニューもその高さになってしまいます。なので、

#navi ul.sub-menu, #navi ul.children {
  height: 31px;
}
#navi .sub-menu li, #navi .children li {
  height: 100%;
}
#navi .sub-menu li a, #navi .children li a {
  height: 100%;
  line-height: 24px; /*ここも若干少ない方が真ん中っぽい 23pxとか*/
}

※ line-heightは、高さ31px(元々の設定の高さ) – ( フォントサイズ(14px) / 2 ) + α(微調整) です。

多分これぐらいでイケると思うんですけれども、色々やらないといけないのと整合性を保たないとレイアウトが崩れるので、ひとつずつweb開発環境(F12キー)などで確認しながら試してみて下さい。
また元に戻せるように、オリジナルのcss(メニュー部分)はコピーなどしてバックアップしておいて下さい。

返信が遅れましたすみません。

最高です！上手く出来ました。
こんなに対応が早くて、しかも易しく説明していただけるなんて思ってませんでした。
素敵です。

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