Html 悬停和显示问题

我有一个带有水平子菜单的导航栏，它的子菜单出现在悬停状态。我使用display none来隐藏它，但是悬停代码不起作用。这是全部代码

正文{
保证金：0；
填充：0；
背景：#eee；
}
美国海军{
列表样式：无；
边距：200px 0 0 14px；/*上、右、下、左*/
填充：0；
溢出：隐藏；
}
李国荣先生{
浮动：左；
}
.导航a{
背景颜色：灰色；
填充：10px；
右边距：10px；
显示：块；
}
/*SUBNAV*/
subnav ul{
列表样式：无；
填充：10px；
保证金：0；
溢出：隐藏；
背景色：黑色；
显示：无；
}
李素娜先生{
浮动：左；
左边距：25px；
}
.nav li:悬停。SUNBNAV ul{
显示：块；
}

苏努古

您的CSS选择

.subnav

作为

.nav li

的子项，但您的HTML不是这样构造的。
要使用当前CSS，您需要将

.subnav

移动到

.nav li

示例如下：

正文{
保证金：0；
填充：0；
背景：#eee；
}
美国海军{
列表样式：无；
利润率：0.14px；
/*上、右、下、左*/
填充：0；
溢出：隐藏；
}
李国荣先生{
浮动：左；
}
.导航a{
背景颜色：灰色；
填充：10px；
右边距：10px；
显示：块；
}
/*亚纳夫*/
subnav ul{
列表样式：无；
填充：10px；
保证金：0；
溢出：隐藏；
背景色：黑色；
显示：无；
}
李素娜先生{
浮动：左；
左边距：25px；
}
.nav li:悬停。SUNBNAV ul{
显示：块；
}

您的CSS选择

.subnav

作为

.nav li

的子项，但您的HTML不是这样构造的。
要使用当前CSS，您需要将

.subnav

移动到

.nav li

示例如下：

正文{
保证金：0；
填充：0；
背景：#eee；
}
美国海军{
列表样式：无；
利润率：0.14px；
/*上、右、下、左*/
填充：0；
溢出：隐藏；
}
李国荣先生{
浮动：左；
}
.导航a{
背景颜色：灰色；
填充：10px；
右边距：10px；
显示：块；
}
/*亚纳夫*/
subnav ul{
列表样式：无；
填充：10px；
保证金：0；
溢出：隐藏；
背景色：黑色；
显示：无；
}
李素娜先生{
浮动：左；
左边距：25px；
}
.nav li:悬停。SUNBNAV ul{
显示：块；
}

您的HTML结构错误。您需要将subnav div移动到父li下

这是JQUERY。更新了您的示例。产生了法丹效应

如果您只想使用css，请检查css部分中的注释

$（“li.has subnav”）。悬停(
函数（）{
$（'subnav'）.fadeIn（200）；
},
函数（）{
$（'.subnav'）。淡出（200）；
}
);
.nav-ul{
列表样式：无；
页边距：0 14px；/*上、右、下、左*/
填充：0；
}
李国荣先生{
显示：内联块；
}
.导航a{
背景颜色：灰色；
填充：10px；
右边距：10px；
显示：块；
}
/*SUBNAV*/
.subnav{
列表样式：无；
填充：10px；
背景色：黑色；
显示：无；
位置：绝对位置；
左：0；
宽度：100%；
框大小：边框框；
}
/**取消注释以下css并删除jQuery以仅使用css**/
//.has subnav:悬停。subnav{
//显示：块；
//}

苏努古









您的HTML结构错误。您需要将subnav div移动到父li下

这是JQUERY。更新了您的示例。产生了法丹效应

如果您只想使用css，请检查css部分中的注释


$（“li.has subnav”）。悬停(
函数（）{
$（'subnav'）.fadeIn（200）；
},
函数（）{
$（'.subnav'）。淡出（200）；
}
);
.nav-ul{
列表样式：无；
页边距：0 14px；/*上、右、下、左*/
填充：0；
}
李国荣先生{
显示：内联块；
}
.导航a{
背景颜色：灰色；
填充：10px；
右边距：10px；
显示：块；
}
/*SUBNAV*/
.subnav{
列表样式：无；
填充：10px；
背景色：黑色；
显示：无；
位置：绝对位置；
左：0；
宽度：100%；
框大小：边框框；
}
/**取消注释以下css并删除jQuery以仅使用css**/
//.has subnav:悬停。subnav{
//显示：块；
//}

苏努古









.nav li:hover.subnav ul
不是标记的正确选择器。
.subnav
不是您的
.nav li
的孩子，您希望它具体如何工作？示例图表或插图可能会有所帮助。@showdev如果您从.subnav ul中删除display none，您可以看到为shop分配了一个全宽子菜单。
。nav li:hover.subnav ul
不是标记的正确选择器。
.subnav
不是您的
.nav li
的孩子，您希望它具体如何工作？A.