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 TO HTML 转换
Jun 26 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
Javascript document.referrer判断访客来源网址
May 15 Javascript
JSON辅助格式化处理方法
Mar 26 Javascript
jquery默认校验规则整理
Mar 24 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
4 种滚动吸顶实现方式的比较
Apr 09 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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适配器模式介绍
2012/08/14 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
phalcon框架使用指南
2016/02/23 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
JavaScript库 开发规则
2009/01/31 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
Python读取YUV文件,并显示的方法
2018/12/04 Python
python获取交互式ssh shell的方法
2019/02/14 Python
Python绘图实现显示中文
2019/12/04 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
CSS3 简写animation
2012/05/10 HTML / CSS
Myholidays美国:在线旅游网站
2019/08/16 全球购物
夜大毕业生自我鉴定
2013/10/31 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
学习型党组织心得体会
2014/09/12 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
大学生入党自传2015
2015/06/26 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android
什么是Python装饰器?如何定义和使用?
2022/04/11 Python