こんにちは
header .smanone ul.menu li {
display: table-cell;
float: none;
}
というCSSが出力されています。
このうちの、
float: none;
を削除すればとりあえず崩れるのは直りますが、こんどは「私について」というメニューが一段落ちてしまいます。
これの応急措置としては
/*メニューを真ん中に調整*/
@media print, screen and (min-width: 1000px) {
header .smanone ul.menu {
display: table;
の
display: table;
を
display: flex;
にすればとりあえずうまく行きますが、子メニューのcssとの整合がちょっと良くないのでメニューのCSS全般に直した方がいいかもしれませんが・・・
このCSSをどうやって修正するかですが、カスタマイザーの「追加CSS」ではないかと思います。
外観 > カスタマイズ > 追加 CSS
で表示されます。
お忙しい中ありがとうございます!
試しに、
メニューから「私について」を削除
「display: table」を「display: flex」に変更
してみました。
すると、マウスを置くと下に伸びていく現象は直ったのですが、
階層表示が縦になってしまったままです。
それで、階層表示になっているところのタイトルメニューが長いのかと思って
短くしたのですが、それでも縦になったままです。
私の方でも引き続き色々と調べてみますが、何かご存知でしたら
教えて頂けると幸いです。
それではすみませんがよろしくお願いいたします。
お世話になります。
これについてですが、追加CSSのところのメニューに関するCSSを消してみたら直りました。
どこがダメだったのかという具体的な理由はまだ分からないままであまり解決にはなっていませんが
お騒がせいたしました。
/*メニューを真ん中に調整
@media print, screen and (min-width: 1000px) {
header .smanone ul.menu {
display: flex;
table-layout: fixed;
text-align: center;
max-width: 1048px;
margin: 0 auto;
}
header .smanone ul.menu li {
display: table-cell;
float: none;
}*/
header .smanone ul.menu li a:hover {
color: #fff;
background-color: #66ccff;
}
/*}*/
上記、追加CSSの部分で追加していたコードです。
この部分で
header .smanone ul.menu li a:hover {
color: #fff;
background-color: #66ccff;
}
の部分だけ表示させ、あとはコメント化するということで対応しました。
色々とありがとうございました。