jQuery下拉菜单的实现代码


Posted in Javascript onNovember 03, 2016

jQuery是一款流行已久的Javascript框架,确实很好用。今天我给大家介绍jquery下拉菜单的实现代码,具体代码如下所述:

jQuery下拉菜单的实现代码

<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
* {
padding: 0;
margin: 0;
ul {
list-style: none;
.wrap {
width: 730px;
height: 50px;
margin: 100px auto 0;
background-color: lightgray;
padding-left: 10px;
border-radius: 10px;
padding-bottom: 3px;
.wrap li {
float: left;
width: 130px;
height: 50px;
margin-right: 10px;
position: relative;
.wrap a {
margin-top: 3px;
color: gray;
text-decoration: none;
display: block;
width: 130px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 21px;
border-radius: 10px;
.wrap li ul {
position: absolute;
display: none;
.wrap li ul li {
margin-top: 3px;
.wrap li ul li a:hover{
color: red;
<script src="jquery-1.11.1.min.js"></script>
$(document).ready(function () {
$(".wrap li").hover(function () {
});
<div class="wrap">
<a href="#">中国</a>
<li><a href="#">广州</a></li>
<li><a href="#">深圳</a></li>
<li><a href="#">北京</a></li>
<li><a href="#">上海</a></li>
<a href="#">美国</a>
<li><a href="#">旧金山</a></li>
<li><a href="#">华盛顿</a></li>
<li><a href="#">西雅图</a></li>
<a href="#">英国</a>
<li><a href="#">伦敦</a></li>
<li><a href="#">爱丁堡</a></li>
<li><a href="#">伯明翰</a></li>
<a href="#">南非</a>
<li><a href="#">约翰内斯堡</a></li>
<li><a href="#">伊丽莎白港</a></li>
<li><a href="#">茨瓦内</a></li>
</li><li>
<a href="#">澳大利亚</a>
<li><a href="#">堪培拉</a></li>
<li><a href="#">悉尼</a></li>
<li><a href="#">墨尔本</a></li
</ul></html>

jQuery下拉菜单的实现代码

以上所述是小编给大家介绍的jQuery下拉菜单的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用javascript实现画板的代码
Sep 05 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
javascript变量声明实例分析
Apr 25 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 #Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 #Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 #Javascript
vue自定义指令实现v-tap插件
Nov 03 #Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 #Javascript
vue.js指令v-for使用及索引获取
Nov 03 #Javascript
vue.js初学入门教程(1)
Nov 03 #Javascript
You might like
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
php 函数使用方法与函数定义方法
2010/05/09 PHP
php中cookie的使用方法
2014/03/29 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
JS 实现导航栏悬停效果
2013/09/23 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
Python实例之wxpython中Frame使用方法
2014/06/09 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
pytorch数据预处理错误的解决
2020/02/20 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
幼儿园教师自我鉴定
2014/03/20 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
郭明义电影观后感
2015/06/08 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
MySQL系列之三 基础篇
2021/07/02 MySQL
Vue Element plus使用方法梳理
2022/12/24 Vue.js