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 相关文章推荐
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
layui select动态添加option的实例
Mar 07 Javascript
JavaScript实现随机点名器
Mar 25 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 中文处理函数集合
2008/08/27 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
js里的prototype使用示例
2010/11/19 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
js继承的这6种方式!(上)
2019/04/23 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
详解React 元素渲染
2020/07/07 Javascript
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
使用Python进行目录的对比方法
2018/11/01 Python
使用django实现一个代码发布系统
2019/07/18 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
Python 操作 MySQL数据库
2020/09/18 Python
如何通过python检查文件是否被占用
2020/12/18 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
拾金不昧的表扬信
2014/01/16 职场文书
秋季红领巾广播稿
2014/01/27 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
市场营销调查计划书
2014/05/02 职场文书
主题团日活动总结
2014/06/25 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
先进人物事迹材料
2014/12/29 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
JavaScript实现简单计时器
2021/06/22 Javascript
利用Python实现Picgo图床工具
2021/11/23 Python