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打印输出json实例
Nov 11 Javascript
node.js中的fs.chownSync方法使用说明
Dec 16 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
Vue生命周期示例详解
Apr 12 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 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操作excel文件 基于phpexcel
2010/07/02 PHP
destoon复制新模块的方法
2014/06/21 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
js弹出div并显示遮罩层
2014/02/12 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
python 正则表达式 概述及常用字符
2009/05/04 Python
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
python更新列表的方法
2015/07/28 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Python实现Event回调机制的方法
2019/02/13 Python
python列表推导式操作解析
2019/11/26 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
Python自动化操作实现图例绘制
2020/07/09 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
如何以Winsows Service方式运行JupyterLab
2020/08/30 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
税务专业毕业生自荐信
2013/11/10 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
拓展训练激励口号
2014/06/17 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
世界读书日的活动方案
2014/08/20 职场文书
通知函的格式
2015/04/27 职场文书
农村党支部承诺书
2015/04/30 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
Python数据分析之pandas函数详解
2021/04/21 Python
Python 语言实现六大查找算法
2021/06/30 Python
Python 正则模块详情
2021/11/02 Python