LIONMEDIAでプルダウン式のメニューバーを実装したいです

Question

前提・実現したいこと

皆さま、お世話になります。

WordPressの『LIONMEDIA』にてプルダウン（オーバーダウン？）式のメニューバーを実装したく、下記のURL先を参考に8時間ほど格闘しております。

参考URL：https://ayaito.net/wordpress/customize/8313/

しかし、このまま実装してしまうとスマホ表示（max-width:767px）時に『<ul class="sub-menu">』が重なって表示されてしまう為、困っております。

尚、スマホ表示（max-width:767px）時に『<ul class="sub-menu">』を消してしまおうと、下記のコードを実装してみたのですが、叶いませんでした。

@media screen and (max-width:640px){
	ul sub-menu {
		display: none;
	}
}

そこで、スマホ表示（max-width:767px）時に『<ul class="sub-menu">』に対して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;
	}
}

Answer 1

『LIONMEDIA』は使った事がありませんので推測ですが、、、

デモサイト を見ますと
メニューは横並びで
あふれたメニューをドロップダウンにする設定なのですね。。。

サブメニューのドロップダウン設定を登録された際
cssをそのままコピペされたのでしたら

そこに書かれていた通りのクラス名を使用して

@media (max-width: 768px) {
    .globalNavi li:hover .sub-menu {
        display: none;
    }
}

にする方法もありますし

或いはコピペしたコードそのものをメディアクエリにして

/* 768px以上で発動 */
@media (min-width: 768px) {

/* ここにサブメニュー用のコードを入れる */

}

にしてしまっても良いかと思います^^

Comments

[fattymeat]

本当にありがとうございます！

早速試してみます！