用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 相关文章推荐
JavaScript创建命名空间(namespace)的最简实现
Dec 11 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
js保留两位小数方法总结
Jan 31 Javascript
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 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
PHP5 面向对象程序设计
2008/02/13 PHP
php URL验证正则表达式
2011/07/19 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
javascript实现日历效果
2019/06/17 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
python追加元素到列表的方法
2015/07/28 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
python定时关机小脚本
2018/06/20 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
人事助理岗位职责
2013/11/18 职场文书
药学专业个人的自我评价
2013/12/31 职场文书
运动会加油稿100字
2014/09/19 职场文书
2014年新农村建设工作总结
2014/12/01 职场文书
项目建议书
2015/02/04 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
刘胡兰观后感
2015/06/16 职场文书
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
python画条形图的具体代码
2022/04/20 Python