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 相关文章推荐
基于JQuery的asp.net树实现代码
Nov 30 Javascript
JavaScript字符串插入、删除、替换函数使用示例
Jul 25 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
react-router中的属性详解
Jun 01 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 Javascript
JavaScript实现网页跨年倒计时
Dec 02 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
解析php取整的几种方式
2013/06/25 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
用JS做的简单的可折叠的两级树形菜单
2013/09/21 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
python之wxPython菜单使用详解
2014/09/28 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
python实现自主查询实时天气
2018/06/22 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
python实现图书借阅系统
2019/02/20 Python
Python面向对象封装操作案例详解
2019/12/31 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
高中毕业生生活的自我评价
2013/12/08 职场文书
银行开业庆典方案
2014/02/06 职场文书
车间主任岗位职责
2014/03/16 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
加强党性修养心得体会
2016/01/21 职场文书
Javascript webpack动态import
2022/04/19 Javascript
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技