用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 面向对象编程基础:继承
Aug 21 Javascript
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
js实现tab栏切换效果
Aug 02 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
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
python 不关闭控制台的实现方法
2011/10/23 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
如何定义TensorFlow输入节点
2020/01/23 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
会议接待欢迎词
2014/01/12 职场文书
电工技术比武方案
2014/05/11 职场文书
群教个人对照检查材料
2014/08/20 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android