<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">
<div class="megamenu-subitems-default">
<p>hello-default</p>
;
<div class="megamenu-subitems-test" id="subitems">
<p>hello-1</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元素的后代。