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

 更新时间:2014年05月18日 16:24:33   转载 作者:  
这篇文章主要介绍了用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>

相关文章

  • jQuery之折叠面板的深入解析

    jQuery之折叠面板的深入解析

    本篇文章是对jQuery中的折叠面板进行了详细的分析介绍,需要的朋友参考下
    2013-06-06
  • jQuery实现Email邮箱地址自动补全功能代码

    jQuery实现Email邮箱地址自动补全功能代码

    这篇文章主要介绍了jQuery实现Email邮箱地址自动补全功能代码,涉及jQuery鼠标事件及字符操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 加载jQuery后$冲突的解决办法

    加载jQuery后$冲突的解决办法

    因为jquery中也有$调用,如果原来已经定义了,难免会冲突。下面是一些解决思路。
    2010-07-07
  • 浅谈jquery中的each方法$.each、this.each、$.fn.each

    浅谈jquery中的each方法$.each、this.each、$.fn.each

    下面小编就为大家带来一篇浅谈jquery中的each方法$.each、this.each、$.fn.each。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • jQuery实现标题有打字效果的焦点图代码

    jQuery实现标题有打字效果的焦点图代码

    这篇文章主要介绍了jQuery实现标题有打字效果的焦点图代码,可实现幻灯片切换显示时标题同步逐个打印显示的效果,涉及jQuery操作json格式数据及时间函数的相关技巧,需要的朋友可以参考下
    2015-11-11
  • jquery validate表单验证的基本用法入门

    jquery validate表单验证的基本用法入门

    这篇文章主要为大家介绍了jquery validate表单验证的基本用法入门,jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)

    DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)

    DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们,下面介绍DOM事件阶段以及事件捕获与事件冒泡先后执行顺序
    2015-08-08
  • 基于jquery tab切换(防止页面刷新)

    基于jquery tab切换(防止页面刷新)

    tab切换,是一个很常见的效果,今天在项目中遇到这样一个问题。就是切换后,页面刷新,又重新定位到第一个上了,很是郁闷
    2012-05-05
  • jQuery EasyUI中DataGird动态生成列的方法

    jQuery EasyUI中DataGird动态生成列的方法

    EasyUI中使用DataGird显示数据列表中,有时需要根据需要显示不同的列,例如,在权限管理中,不同的用户登录后只能查看自己权限范围内的列表字段,这就需要DataGird动态组合列,下面介绍EasyUI中DataGird动态生成列的方法
    2016-04-04
  • jQuery实现鼠标跟随效果

    jQuery实现鼠标跟随效果

    本文主要分享了jQuery实现鼠标跟随效果的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02

最新评论