質問: ### 前提・実現したいこと 皆さま、お世話になります。 WordPressの『LIONMEDIA』にてプルダウン(オーバーダウン?)式のメニューバーを実装したく、下記のURL先を参考に8時間ほど格闘しております。 参考URL:https://ayaito.net/wordpress/customize/8313/ しかし、このまま実装してしまうとスマホ表示(max-width:767px)時に『』が重なって表示されてしまう為、困っております。 尚、スマホ表示(max-width:767px)時に『』を消してしまおうと、下記のコードを実装してみたのですが、叶いませんでした。 ``` @media screen and (max-width:640px){ ul sub-menu { display: none; } } ``` そこで、スマホ表示(max-width:767px)時に『』に対してblock要素を与えて(下記参照)重なるのを回避しようとしてみましたが、やはり解消されません。 ``` @media only screen and (max-width: 767px){ .sub-menu li a { display: block; font-size: 1em; } } ``` どうかお助け下さいませ。 2020/07/01 - 20:28追記 ▽下記のCSSに対して『clear:both;』を加えてみましたが、やはり解消されませんでした。 ``` @media only screen and (max-width: 767px){ .sub-menu li a { display: block; font-size: 1em; clear:both; } } ```
回答: 『LIONMEDIA』は使った事がありませんので推測ですが、、、 デモサイト を見ますと メニューは横並びで あふれたメニューをドロップダウンにする設定なのですね。。。 サブメニューのドロップダウン設定を登録された際 cssをそのままコピペされたのでしたら そこに書かれていた通りのクラス名を使用して ``` @media (max-width: 768px) { .globalNavi li:hover .sub-menu { display: none; } } ``` にする方法もありますし 或いはコピペしたコードそのものをメディアクエリにして ``` /* 768px以上で発動 */ @media (min-width: 768px) { /* ここにサブメニュー用のコードを入れる */ } ``` にしてしまっても良いかと思います^^