用jquery实现的一个超级简单的下拉菜单


Posted in Javascript onMay 18, 2014

用jquery实现的一个超级简单的下拉菜单。

效果图

初始效果
用jquery实现的一个超级简单的下拉菜单 
鼠标悬浮效果
用jquery实现的一个超级简单的下拉菜单 
代码

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="jquery-1.11.1.js"></script> 
<style> nav a { 
text-decoration: none; 
} 
nav > ul > li { 
float: left; 
text-align: center; 
padding: 0 0.5em; 
} 
nav li ul.sub-menu { 
display: none; 
padding-left: 0 !important; 
} 
.sub-menu li { 
color: white; 
} 
.sub-menu li:hover { 
background-color: black; 
} 
.sub-menu li:hover a { 
color: white; 
} 
ul { 
list-style: none; 
} 
</style> 
</head> 
<body> 
<nav> 
<ul> 
<li><a href="#">Home 
<ul class="sub-menu"> 
<li><a href="#">sub1</a></li> 
<li><a href="#">sub2</a></li> 
<li><a href="#">sub3</a></li> 
</ul> 
</li> 
<li><a href="#">Programming 
<ul class="sub-menu"> 
<li><a href="#">sub1</a></li> 
<li><a href="#">sub2</a></li> 
<li><a href="#">sub3</a></li> 
</ul> 
</li> 
<li><a href="#">Japanese 
<ul class="sub-menu"> 
<li><a href="#">sub1</a></li> 
<li><a href="#">sub2</a></li> 
<li><a href="#">sub3</a></li> 
</ul> 
</li> 
</ul> 
</nav> 
</body> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('nav li').hover(function() { 
$(this).find('.sub-menu').css('display', 'block'); 
}, function() { 
$(this).find('.sub-menu').css('display', 'none'); 
}); 
}); 
</script> 
</html>
Javascript 相关文章推荐
写js时遇到的一些小问题
Dec 06 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 #Javascript
绑定回车enter事件代码
May 18 #Javascript
javascript的alert box在java中如何显示多行
May 18 #Javascript
JSON+HTML实现国家省市联动选择效果
May 18 #Javascript
让alert不出现弹窗的两种方法
May 18 #Javascript
jqGrid读取选择的多行的某个属性代码
May 18 #Javascript
wap浏览自动跳转到wap页面的js代码
May 17 #Javascript
You might like
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
pandas数据处理之绘图的实现
2020/06/15 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
护理专业推荐信
2013/11/07 职场文书
出国导师推荐信
2014/01/16 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
市场调查策划方案
2014/06/10 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
单位考核聘任报告
2015/03/02 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL