Javascript 如何使用jquery显示子菜单？

当我鼠标悬停时，我拼命想让子菜单出现在下面的菜单项下。 我使用css创建了菜单项悬停时的颜色更改和下划线，但不知道如何使子菜单显示在菜单项下。我没有与jquery相关的知识，所以我在谷歌上搜索了一些jquery效果，但也不起作用。 有没有其他方法不使用jquery就显示它

.菜单{
左边距：220px；
}
.菜单项文本{
显示：内联块；
边缘顶部：18px；
颜色：黑色；
字号：550；
}
.菜单项文本：悬停{
内容：''；
颜色：红色；
}
.菜单项文本：悬停：之后{
内容：''；
显示：块；
边框底部：2个实心rgb（15,1,1）；
边缘顶端：19像素；
}
.sub-menu1{
背景：黄绿色；
位置：绝对位置；
显示：块；
}
.子菜单li{
空白：nowrap；
显示：内联；
}
.子菜单a：之前{
内容:'☆';
顶部：2个；
}
.子菜单a:悬停：之前，.子菜单a:焦点：之前{
内容:'★';
} 
.导航.子菜单{
显示：无；
}
.菜单动作.菜单项文本{
颜色：红色；
}
.sub-menu1 li、.sub-menu1 a{
显示：内联块；
}

关于HTML

您不需要JQuery在悬停状态下显示子菜单。你可以用CSS来做

.menu-item:hover .sub-menu {display: block;}

如果有多个子菜单，则使用id或不同的类名。因此，您可以在每个菜单下显示相应的子菜单

.菜单{
左边距：220px；
}
.菜单项文本{
显示：内联块；
边缘顶部：18px；
颜色：黑色；
字号：550；
}
.菜单项文本：悬停{
内容：''；
颜色：红色；
}
.菜单项文本：悬停：之后{
内容：''；
显示：块；
边框底部：2个实心rgb（15,1,1）；
边缘顶端：19像素；
}
.sub-menu1{
背景：黄绿色；
位置：绝对位置；
显示：块；
}
.子菜单li{
空白：nowrap；
显示：内联；
}
.子菜单a：之前{
内容:'☆';
顶部：2个；
}
.子菜单a:悬停：之前，.子菜单a:焦点：之前{
内容:'★';
} 
.菜单项：悬停.子菜单{显示：块；}
.导航.子菜单{
显示：无；
}
.菜单动作.菜单项文本{
颜色：红色；
}
.sub-menu1 li、.sub-menu1 a{
显示：内联块；
}

关于HTML

您也可以使用

CSS

来实现这一点，但是您在

jquery

中提到了您想要的，这就是我使用

jquery

的原因

我想你想要这样：-

$（文档）.ready（函数（）{
$（'.menu item text'）.mouseover（函数（）{
$（this.next（'.sub-menu'）.show（）；
});
$（'.menu item text'）.mouseout（函数（）{
$（this.next（'.sub-menu'）.hide（）；
});
});
菜单{
左边距：220px；
}
.菜单项文本{
显示：内联块；
边缘顶部：18px；
颜色：黑色；
字号：550；
}
.菜单项文本：悬停{
内容：''；
颜色：红色；
}
.菜单项文本：悬停：之后{
内容：''；
显示：块；
边框底部：2个实心rgb（15,1,1）；
边缘顶端：19像素；
}
.sub-menu1{
背景：黄绿色；
位置：绝对位置；
显示：块；
}
.子菜单li{
空白：nowrap；
显示：内联；
}
.子菜单a：之前{
内容:'☆';
顶部：2个；
}
.子菜单a:悬停：之前，.子菜单a:焦点：之前{
内容:'★';
} 
.导航.子菜单{
显示：无；
}
.菜单动作.菜单项文本{
颜色：红色；
}
.sub-menu1 li、.sub-menu1 a{
显示：内联块；
}



关于HTML










我已经编辑了我的答案，将JQuery的解决方案也包括在内。