本文主要详细介绍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

这就是本文的全部内容。希望对大家的学习有帮助，支持我们。