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窗口功能指南之在窗口中书写内容
Jul 21 Javascript
如何实现动态删除javascript函数
May 27 Javascript
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
Jan 13 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 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
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
跟老齐学Python之用Python计算
2014/09/12 Python
Python 基础教程之str和repr的详解
2017/08/20 Python
python的中异常处理机制
2018/08/30 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
python分布式编程实现过程解析
2019/11/08 Python
python绘制规则网络图形实例
2019/12/09 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
如何在django中实现分页功能
2020/04/22 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
美国牛仔品牌:True Religion
2018/11/16 全球购物
入党申请自荐书范文
2014/02/11 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
党员三严三实对照检查材料
2014/10/13 职场文书
创业计划书之美容店
2019/09/16 职场文书
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
2021/08/04 Vue.js