ホバーが機能せず、スタイルが表示されないのはなぜですか?
<p>ナビゲーション バーをデザインしていますが、マウスオーバーが機能しません。ドロップダウン メニューの「man」項目にカーソルを合わせると、そのホバー スタイルが機能せず、そのスタイルがインスペクターに表示されません。何かある?これは我のHTML代コード:</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">/* Navbar コンテナ */
体 {
マージン: 0;
パディング: 0;
ボックスのサイズ設定: ボーダーボックス;
}
リ {
テキスト装飾: なし。
}
.nav-container {
方向: rtl;
テキスト整列: 右
}
.navbar {
オーバーフロー: 非表示;
背景色: #333;
フォントファミリー: Arial;
}
/* ナビゲーションバー内のリンク */
.navbar a {
フロート: 右;
フォントサイズ: 16px;
色: 白;
テキスト整列: 中央;
パディング: 14px 16px;
テキスト装飾: なし。
}
/* ドロップダウン コンテナ */
。落ちる {
フロート: 右;
オーバーフロー: 非表示;
}
/* ドロップダウン ボタン */
.ドロップダウン .ドロップbtn {
フォントサイズ: 16px;
境界線: なし。
概要: なし。
色: 白;
パディング: 14px 16px;
背景色: 継承;
フォント: 継承;
/* 携帯電話での垂直方向の配置について重要 */
マージン: 0;
/* 携帯電話での垂直方向の配置について重要 */
}
/* ドロップダウンのコンテンツ (デフォルトでは非表示) */
.dropdown-content {
表示: なし。
位置: 絶対;
背景色: #f9f9f9;
幅: 100%;
左: 0;
ボックスシャドウ: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z インデックス: 1;
}
.dropdown:hover .dropdown-content {
表示ブロック;
}
.megamenu-container {
背景色: 水色;
幅: 100%;
}
.megmenu {
幅: 100%;
}
.megamenu-title {
幅: 20%;
背景色: 青;
表示: インラインブロック;
パディング: 5px 15px;
垂直配置: 上;
}
.megamenu-subitems-default {
幅: 70%;
背景色: 青紫;
表示: インラインブロック;
パディング: 15px;
}
.megamenu-item {
float: 設定を解除します!重要;
パディング: 0 !重要;
}
.man:hover .megamenu-subitems-default {
可視性: 非表示;
}
#サブアイテム {
表示: インラインブロック;
可視性: 非表示;
背景色: 黄緑;
幅: 70%;
}
.man:hover #subitems {
可視性: 可視;
}
。テスト {
色: 黄色;
}
.man:ホバー .test {
色: 小麦;
}</pre>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html lang="ja">
<頭>
<メタ文字セット="UTF-8">
<meta http-equiv="X-UA 互換" content="IE=edge">
<meta name="viewport" content="width=device-width、initial-scale=1.0">
<リンク rel="スタイルシート" href="./megamenu.css">
<title>ドキュメント</title>
</head>
<本体>
<div class="nav-container">
<div class="ナビゲーションバー">
<a href="#home">ホーム</a>
<a href="#news">ニュース</a>
<div class="ドロップダウン">
<button class="dropbtn">ドロップダウン
<i class="fa fa-caret-down"></i>
</ボタン>
<div class="ドロップダウンコンテンツ">
<div class="メガメニューコンテナ">
<div class="megmenu">
<div class="メガメニュータイトル">
<リ>
<div class="男">
<a class="megamenu-item" href="#">男</a>
</div>
</li>
<li id="女性">
<a class="megamenu-item" href="#">女性</a>
</li>
<li id="キッド">
<a class="megamenu-item" href="#">子供</a>
</li>
</ul>
</div>
<div class="megamenu-subitems-default">
<p>こんにちはデフォルト</p>
</div>
<div class="megamenu-subitems-test" id="subitems">
<p>hello-1</p>
</div>
<div class="megamenu-subitems">
<p>hello-2</p>
</div>
<div class="megamenu-subitems">
<p>hello-3</p>
</div>
<div class="megamenu-subitems">
<p>hello-4</p>
</div>
</div>
</div>
<p class="テスト">テスト</p>
</div>
</div>
</div>
</div>
</ボディ>
</html></pre>
<p><br /></p>
<p>当我悬停止在“男”项目在我的下拉菜单、它的悬样式不作動，不显示停止样式在検査</p>
