本文主要详细介绍Jquery实现下拉菜单的案例。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享Jquery实现下拉菜单的具体代码，供大家参考。具体内容如下
所需的结构如下：
关于布局：
布局ul包含4个li，li包含一个标签(微博)和ul(下面的下拉菜单)。悬停移动到下拉菜单后会改变背景颜色。
关于功能：
先用jquery获取元素，然后给li添加mouseenter方法显示下面的下拉菜单，再给li添加mouseleave方法，离开后隐藏下拉菜单。
最终代码如下：
！文档类型html
html lang='en '
头
meta charset='UTF-8 '
meta http-equiv=' X-UA-Compatible ' content=' IE=edge '
meta name=' viewport ' content=' width=device-width，initial-scale=1.0 '
Titlejq下拉菜单/标题
脚本src='。/js/jquery.min.js'/script
样式语言=' '
* {
边距：0；
填充：0；
}
李{
列表样式：无；
}
一个{
文字-装饰：无；
颜色：黑色；
}。导航{
边距：100px 500px
浮动：左；
字体大小：12px
}。navli {
浮动：左；
文本对齐：居中；
}。navli a {
显示：块；
填充：10px 21px
}。navli ul li {
光标：指针；
填充：10px 20px
border-left:1px solid # EFD 8 af；
border-right:1px solid # EFD 8 af；
border-bottom:1px solid # EFD 8 af；
}。navli ul {
显示：无；
}。navli ul li:悬停{
背景色：# fff4d8
}
/风格
/头
身体
脚本
$(function() {
//将鼠标悬停在导航中的李上
$('.nav Li’)。mouseenter(function() {
//显示下面的下拉菜单
$(这个)。儿童(' ul ')。show()；
});
//鼠标离开，然后躲起来。
$('.nav Li’)。mouseleave(function() {
$(这个)。儿童(' ul ')。hide()；
})
})
/脚本
ul class='nav '
里
A href='# '微博/a
保险商实验所
李私信/李
李评论/李
李@我/李
/ul
/李
里
A href='# '微博/a
保险商实验所
李私信/李
李评论/李
李@我/李
/ul
/李
里
A href='# '微博/a
保险商实验所
李私信/李
李评论/李
李@我/李
/ul
/李
里
A href='# '微博/a
保险商实验所
李私信/李
李评论/李
李@我/李
/ul
/李
/ul
/body
/html
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。