用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 相关文章推荐
jquery validator 插件增加日期比较方法
Feb 21 Javascript
用jQuery打造TabPanel效果代码
May 22 Javascript
jqeury eval将字符串转换json的方法
Jan 20 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
基于jquery实现图片放大功能
May 07 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
uni-app如何页面传参数的几种方法总结
Apr 28 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
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
微信小程序实现tab页面切换功能
2018/07/13 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
Python字典对象实现原理详解
2019/07/01 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
Django的CVB实例详解
2020/02/10 Python
Python logging模块原理解析及应用
2020/08/13 Python
python 如何调用远程接口
2020/09/11 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
可贵的沉默教学反思
2014/02/06 职场文书
标准单位租车协议书
2014/09/23 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
车队安全员岗位职责
2015/02/15 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏