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插件 easyUI属性汇总
Jan 19 Javascript
javascript中indexOf技术详解
May 07 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
Vuex入门到上手教程
Jun 20 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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简单截取字符串代码示例
2016/10/19 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
javascript用函数实现对象的方法
2015/05/14 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
Python探索之pLSA实现代码
2017/10/25 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
详解python如何引用包package
2020/06/07 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
总经理司机职责
2014/02/02 职场文书
项目合作协议书
2014/04/16 职场文书
操行评语大全
2014/04/30 职场文书
学术诚信承诺书
2014/05/26 职场文书
北京申奥口号
2014/06/19 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
六查六看剖析材料
2014/10/06 职场文书
委托证明范本
2014/11/25 职场文书
十佳少年事迹材料
2014/12/25 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python