Jquery 将鼠标悬停在屏幕上创建子菜单<；李>；在下拉列表中。就像我的网站下拉列表一样

大家好，当我将鼠标悬停在

上时，我想要一个子菜单列表，但我已经尝试了，但没有得到代码。这是一个例子

$（“#giri”）。在（“单击”，函数（）{
$（“.classic”）.fadeToggle（1000）
});
$（“.checkit”）.on（“mouseenter”，function（）{
$（“.trying”）.fadeToggle（1000）
});
.classic{
利润率最高：0.6%；
显示：无；
位置：绝对位置；
高度：470px；
最小宽度：270px；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.5）；
z指数：3；
边框：1px实心rgba（40,0,30,0.2）；
边框右上角半径：4px；
边框左上半径：4px；
边框右下半径：4px；
边框左下半径：4px；
颜色：#555；
背景#4CA1AF；
/*旧浏览器的回退*/
背景：-webkit线性渐变（向右，#C4E0E5，#4CA1AF）；
/*Chrome 10-25，Safari 5.1-6*/
背景：线性梯度（向右，#C4E0E5，#4CA1AF）；
/*W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+*/
字体系列：“龙虾二号”，草书；
}
您可以使用纯CSS实现这一点。只需指定，子元素仅在父元素悬停时可见


正文{
字体系列：Arial；
}
跨度：悬停>ul{
显示：块；
}
span>ul{
显示：无；
保证金：0；
填充：0；
}
span>ulli{
显示：块；
宽度：200px；
高度：30px；
位置：相对位置；
边框底部：1px纯色灰色；
}
span>ul li>ul{
显示：无；
位置：绝对位置；
左：200px；
顶部：0px；
背景色：#73AC21；
颜色：白色；
边框底部：1px纯白；
}
span>ul li:悬停>ul{
显示：块；
}
Nav

试验

子测验
子测验


测试2

子测验2
子测验2



$（“#giri”）。在（“mouseenter”，function（）上{
$（“.classic”）.fadeToggle（1000）
})
.classic{
利润率最高：0.6%；
显示：无；
位置：绝对位置；
高度：470px；
最小宽度：270px；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.5）；
z指数：3；
边框：1px实心rgba（40,0,30,0.2）；
边框右上角半径：4px；
边框左上半径：4px；
边框右下半径：4px；
边框左下半径：4px；
颜色：#555；
背景：#4CA1AF；/*旧浏览器的回退*/
背景：-webkit线性渐变（向右，#C4E0E5，#4CA1AF）；/*Chrome 10-25，Safari 5.1-6*/
背景：线性渐变（向右，#C4E0E5，#4CA1AF）；/*W3C，IE 10+/Edge，Firefox 16+，Chrome 26+，Opera 12+，Safari 7+*/
字体系列：“龙虾二号”，草书；
}


去溜冰吧

现在就加入尼诺集团吧

购买一些新的笔记本电脑

查看笔记本电脑设置


你能让文本2与第一个文本具有相同的高度吗？也就是说，高度相同，但内容的变化与下拉列表的高度相同。你可以为此添加一点jQuery:
$（'li>ul'）.css（'height'，'+$（'span>ul'）.height（））。当您希望在相同的y位置启动时，必须删除
位置：相对span>ul li>ul
中选择code>并用
top
-值进行实验，该值当前设置为
0px
是的，我知道了，但有没有办法避免子菜单的轻弹，为了让它立即显示，我在下拉列表中输入下一个li，而不是当鼠标触摸li中的文本时，我将通过减少
边距
并将元素放置在彼此相邻的位置，您应该能够消除闪烁。当元素之间没有像素时，一切都应该正常。你可以看看这支钢笔：也许它能帮你解决问题；）我使用了一些jQuery将红色的“导航”按钮与根下拉列表连接起来。其余部分使用纯CSS。我的意思是：在下拉菜单中，当我将鼠标悬停在li标记上时，我希望另一个容器浮动到li标记的右侧，并且具有相同的高度。就像www.udemy.com中的容器一样，我建议您使用@talaub answer，并添加少量动画。因为它比使用jquery更快。