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日期转换 时间戳转日期格式
Nov 05 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
javascript屏蔽右键代码
May 15 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 Javascript
微信小程序实现选项卡滑动切换
Oct 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
php Mysql日期和时间函数集合
2007/11/16 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
python之yield和Generator深入解析
2019/09/18 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
基于Python实现全自动下载抖音视频
2020/11/06 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
销售类个人求职信范文
2013/09/25 职场文书
继电保护工岗位职责
2014/01/05 职场文书
一年级小学生评语大全
2014/12/25 职场文书
离职感谢信
2015/01/21 职场文书
华山导游词
2015/02/03 职场文书
学校推普周活动总结
2015/05/07 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL