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 Object与Function使用
Jan 11 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
JavaScript中操作字符串小结
May 04 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
纯js实现动态时间显示
Sep 07 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 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 class类的用法详细总结
2013/10/17 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
Javascript 遍历对象中的子对象
2009/07/03 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
RequireJs的使用详解
2017/02/19 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
JS实现拼图游戏
2021/01/29 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
python中的装饰器详解
2015/04/13 Python
在Python中使用Neo4j数据库的教程
2015/04/16 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
Python OS模块实例详解
2019/04/15 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
寒假思想汇报
2014/01/10 职场文书
大学生作弊检讨书
2014/02/19 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
商业计划书格式、范文
2019/03/21 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
Python办公自动化PPT批量转换操作
2021/09/15 Python