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 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
juqery 学习之四 筛选过滤
Nov 30 Javascript
js获取当前日期代码适用于网页头部
Jun 27 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
Vue计算属性的使用
Aug 04 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
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中session_unset与session_destroy的区别分析
2011/06/16 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
javascript中this关键字详解
2016/12/12 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
python中join()方法介绍
2018/10/11 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
QA工程师岗位职责
2013/11/20 职场文书
中医专业职业生涯规划书范文
2014/01/04 职场文书
班组安全员工作职责
2014/02/01 职场文书
网络编辑求职信
2014/04/30 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
房地产广告策划方案
2014/05/15 职场文书
招标保密承诺书
2015/01/20 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
检讨书格式范文
2015/05/07 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python