<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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
CSS ファイルには次のルールがあります:
リーリーただし、#subitem は .man の子孫ではありません。 #subitem は .man と同じレベル、またはその子孫として配置する必要があります。
この CSS ルールは、.hover がクラス .man の祖先のいずれかの上にあるときに、ID #subitems を持つ要素が表示されるように指定します。ただし、HTML では、.man は の子要素である A div です。メガメニューアイテム。
デフォルトの子 div を非表示にするには、このセレクターを置き換えてみてください:
リーリー ＃＃＃と：＃＃＃ リーリー各メニュー項目のサブ項目については、各サブ項目 div に一意の ID を与え、JavaScript を使用してその可視性を制御するか、li 要素を持つ .megamenu-subitems div が同じレベルになるようにレイアウトを変更することをお勧めします。兄弟セレクターを使用するか、それらを li 要素の子孫にします。