WordPressのメニュー構造では、「項目を頭一つずらして配置すれば(副項目)、自動的にドロップダウンメニューになる」ということなのだが、自分のオリジナルテーマの場合はレイアウトが見事に崩れてしまう。

なぜなぜなぜ???

WordPressのコアファイルに問題があるのかとか考えたが、違うか。

…

じつはコーディングの段階ではドロップダウンメニューにしてなかったので、子メニューのcssはないという現実から目を背けていたのだった。

で、やっぱりcssに「.sub-menu」の設定が必要なんじゃないかと思って(そりゃそうかも)コードを見直してみることに。ローカルでテスト。

まずは、cssだけでドロップダウンメニュー実装にトライ。

★CSSだけで実装するドロップダウンメニュー

など、いくつかのサイト様を参考にやってみたが、なぜかうまくいかないなぁ…。

そもそもli:hoverに設定して、liからポインターが外れた途端、子メニューの表示が消えてしまう…って、当然だよね。

みんななぜ消えないの?😭

上のサイト様では、

「gnav」に高さを設定しています。
一見、特に高さの指定は必要なさそうですが、こちらを指定していないと、下層の「li」にマウスオーバーした際に、意図しないところでマウスオーバーが外れますので指定しておきましょう。

とあったので、「なるほど、それか!💡」と感激したのも束の間、高さを7remに指定しても、下の方の子メニューはやっぱりマウスオーバーが外れて消えてしまった。(なので、子メニューは横に並べることにした)

正直、次のコードも理解できない。

.gnav li:hover > ul > li {
    …
}

少なくとも、私のサイトではドロップダウンメニューは現れてくれず、結局次のコードで成功した。

 .gnav li:hover ul {
   …
  }

まあほぼほぼ思い通りになったけど、サーバーサイトの方は今までので良いかな。

触らぬ神に祟りなし、だわ。