サポート » 使い方全般 » グローバルメニューのツリー表示が崩れる

  • 解決済 mami1977

    (@24satoumm)


    初めまして。
    Plugin、WordPressなどは全て現在時点での最新の状態にしてあります。

    PC・・windows10

    現在、手話動画まとめ速報というサイトを作っています。
    このサイトのトップページメニューで「紹介動画」というものがあるのですが、この紹介動画にマウスをドラッグすると階層表示されるようにしてあります。
    しかし、この「紹介動画」にマウスを置くと階層表示が崩れて出てくることが分かります。
    階層表示のタイトル(例えば手話サークル紹介など)が長いからかな?と思って短くしても、崩れます。

    なぜでしょうか・・・?

    どうすれば直るのかご教示お願いしたいと思います。
    お忙しい所申し訳ございませんが、なにとぞよろしくお願いいたします。

    • このトピックはmami1977が5年、 9ヶ月前に変更しました。
    • このトピックは5年、 9ヶ月前にmami1977が編集しました。理由: タグの付け忘れ

    ヘルプの必要なページ: [リンクを見るにはログイン]

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • こんにちは

    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
    で表示されます。

    トピック投稿者 mami1977

    (@24satoumm)

    お忙しい中ありがとうございます!
    試しに、

    メニューから「私について」を削除
    「display: table」を「display: flex」に変更

    してみました。

    すると、マウスを置くと下に伸びていく現象は直ったのですが、
    階層表示が縦になってしまったままです。

    それで、階層表示になっているところのタイトルメニューが長いのかと思って
    短くしたのですが、それでも縦になったままです。

    私の方でも引き続き色々と調べてみますが、何かご存知でしたら
    教えて頂けると幸いです。

    それではすみませんがよろしくお願いいたします。

    トピック投稿者 mami1977

    (@24satoumm)

    お世話になります。
    これについてですが、追加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;
    }
    /*}*/
    トピック投稿者 mami1977

    (@24satoumm)

    上記、追加CSSの部分で追加していたコードです。
    この部分で

    header .smanone ul.menu li a:hover {
    	color: #fff;
    	background-color: #66ccff;
    }

    の部分だけ表示させ、あとはコメント化するということで対応しました。
    色々とありがとうございました。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「グローバルメニューのツリー表示が崩れる」には新たに返信することはできません。