<p>我正在設計導航條，但是我的滑鼠懸停不起作用。當我懸停在“man”項目在我的下拉選單，它的懸停樣式，不工作，不顯示樣式在檢查。有問題嗎？這是我的 HTML 程式碼：</p>
<p><br />></p>
/* 導覽列容器 */
身體 {
保證金：0；
填充：0；
框大小：邊框框；
}
李{
文字裝飾：無；
}
.nav-容器{
方向：rtl；
文字對齊：右對齊
}
.導覽列{
溢出：隱藏；
背景顏色：#333；
字體系列：Arial；
}
/* 導覽列內的連結 */
.navbar a {
浮動：右；
字體大小：16px；
白顏色;
文字對齊：居中；
內邊距：14 像素 16 像素；
文字裝飾：無；
}
/* 下拉容器 */
。落下 {
浮動：右；
溢出：隱藏；
}
/* 下拉按鈕 */
.dropdown .dropbtn {
字體大小：16px；
邊框：無；
概要：無；
白顏色;
內邊距：14 像素 16 像素；
背景顏色：繼承；
字體：繼承；
/* 對於手機上的垂直對齊很重要 */
保證金：0；
/* 對於手機上的垂直對齊很重要 */
}
/* 下拉內容（預設隱藏） */
.dropdown-內容{
顯示：無；
位置：絕對；
背景顏色：#f9f9f9；
寬度：100%；
左：0；
框陰影：0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z 索引：1；
}
.dropdown:懸停 .dropdown-content {
顯示：塊；
}
.megamenu-容器{
背景顏色：淺綠色；
寬度：100%；
}
.megmenu {
寬度：100%；
}
.megamenu-標題 {
寬度：20%；
背景顏色：藍色；
顯示：內聯塊；
內邊距：5px 15px；
垂直對齊：頂部；
}
.megamenu-subitems-default {
寬度：70%；
背景顏色：藍紫色；
顯示：內聯塊；
內邊距：15px；
}
.megamenu-item {
浮動：未設定！重要；
填充：0！重要；
}
.man:hover .megamenu-subitems-default {
可見性：隱藏；
}
#子項目{
顯示：內聯塊；
可見性：隱藏；
背景顏色：黃綠色；
寬度：70%；
}
.man：懸停#subitems {
可見性：可見；
}
。測試 {
顏色: 黃色;
}
.man:懸停.test {
顏色: 小麥色;
}</前>
;
<html lang="zh-cn">
<頭>
<元字元集=“UTF-8”>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<元名稱=“視口”內容=“寬度=設備寬度，初始比例= 1.0”>
<link rel="stylesheet" href="./megamenu.css">
<標題>文檔
</頭>
<正文>
<div class="nav-container">
首頁
<a href="#news">新聞</a>
<div class="dropdown">
</li>
<li id="女人">
<a class="megamenu-item" href="#">女人</a>
</li>
<li id="孩子">
<a class="megamenu-item" href="#">kid</a>
</li>
</ul>
<div class="megamenu-subitems-default">
<p>hello-default</p>
在您的CSS檔案中，您有這個規則：
#.man:hover #subitems { visibility: visible; }然而，#subitems不是.man的後代。您需要將#subitems放置在與.man相同的層級上，或作為它的後代。
這個CSS規則指定了當.hover在具有類別.man的祖先之一上懸停時，具有id為#subitems的元素將變為可見；但是，在您的HTML中，.man是一個只有一個子元素.megamenu-item的div。
為了隱藏預設的子項div，請嘗試替換這個選擇器：
.man:hover .megamenu-subitems-default{ visibility: hidden; }with:
.megamenu-title:hover ~ .megamenu-subitems-default{ visibility: hidden; }對於每個選單項目的子項，我建議您要么為每個子項div提供一個唯一的ID並使用JavaScript控制它們的可見性，要么更改您的佈局，使.megamenu-subitems div與li元素處於同一級別，並使用兄弟選擇器，或將它們作為li元素的後代。