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实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
jQuery+PHP星级评分实现方法
Oct 02 Javascript
jQuery入门之层次选择器实例简析
Dec 11 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 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 会话(session 时间设定)使用入门代码
2008/06/05 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
jquery UI 1.72 之datepicker
2009/12/29 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
js导出txt示例代码
2014/01/14 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
Python面向对象编程基础解析(一)
2017/10/26 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
如何理解Python中的变量
2020/06/01 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
无故旷工检讨书
2015/08/15 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python