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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
javascript string字符串优化问题
Jul 31 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
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快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
JS 控件事件小结
2012/10/31 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
Python脚本暴力破解栅栏密码
2015/10/19 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
python实现简单socket通信的方法
2016/04/19 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
运动会稿件200字
2014/02/07 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
美容院员工规章制度
2015/08/05 职场文书