用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-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
eval的两组性能测试数据
Aug 17 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
如何在vue中使用jointjs过程解析
May 29 Javascript
全面解析JavaScript Module模式
Jul 24 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
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
Prototype使用指南之ajax
2007/01/10 Javascript
javascript下查找父节点的简单方法
2007/08/13 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
pytorch中图像的数据格式实例
2020/02/11 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
python 实现音频叠加的示例
2020/10/29 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
高一学生期末评语
2014/04/25 职场文书
英语课外活动总结
2014/08/27 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis