display:noneが効かないです…。

Question

よろしくお願いしますm(_ _)m

テーマは『LIONMEDIA』を使っております。

下記のHTMLコードが実装されたページに…

<nav class="globalNavi">
	<li id="abc" class="def"><a>ここは1階</a>
		<ul class="def-sub">
			<li id="ghi" class="jkl"><a href="https://…" aria-current="page">ここは2階</a></li>
		</ul>
	</li>
</nav>

スマートフォンで表示した時のみ非表示にしたかったので、下記の通り『追加CSS』に対して指示を出してみました…

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

が、なぜか『display:none』が効いてくれません。
CSSの記述がおかしいのかと思い、下記の通り実行してみました…

@media screen and (max-width:767px){
	nav.globalNavi {
		display: none;
	}
}

が、結果は同じでした。
本日の朝からアレコレ試しているのですが、どうしても駄目です。
どうか宜しくお願い致しますm(_ _)m

Comments

[m.ts10806]

@mediaなしではどうなりますか？

[fattymeat]

ご回答頂きありがとうございます！

自己解決しました！

以下詳細です。

[m.ts10806]

回答ではないです。「質問への追記・修正依頼」です。
問題切り分けのために試してもらいたいのです。

[fattymeat]

大変失礼しました。

念の為に『@media』を無しに指示を出してみましたが、エラーだと返されました。

Answer 1

def-subはクラス名だと思うがドットがない

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

Answer 2

@media screen and (max-width:767px){
    nav.globalNavi {
        display: none;
    }
}

上記のCSSで自己解決しました。
どうやら別の所で『display: inline-block』が働いていたようです。

お騒がせしましたm(_ _)m