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

效果图

最初的效果

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

鼠标悬浮效果

代码

<!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 -&gt; 超级简单的下拉菜单的更多相关文章

  1. jquery实现最简单的下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 在AJAX里 使用【 JSON 】 返回数据类型 实现简单的下拉菜单数据

    在AJAX里 使用JSON返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  3. jQuery实现一个淡入淡出下拉菜单 非常简易

    前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...

  4. jQuery插件：模拟select下拉菜单

    没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...

  5. 在AJAX里 使用【 XML 】 返回数据类型 实现简单的下拉菜单数据

    在AJAX里 使用XML返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  6. 基于jQuery带图标的多级下拉菜单

    之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...

  7. jQuery实现多级手风琴树形下拉菜单（源码）

    前几天因为公司的菜单要调整,公司的UI框架是不支持的,所以就自己在网上找了一个下拉菜单,可以支持多级菜单数据的,菜单数据是从xml文件中配置后读取的,网上有许多这方面的例子感觉不是很好用,就打了个包贴 ...

  8. jQuery 实现无限任意添加下拉菜单

    新学jQuery还有很多没学,今天做了个下拉菜单,按照自己的思想结合学的基础效果实现一款可以任意添加层数的下拉菜单,如果有什么建议,欢迎指教啦啦啦 我喜欢备注细一些,这样给自己也是一种理解和方便回顾哈 ...

  9. [jquery]添加行内容后根据下拉菜单选择内容对比之前已有选项，若有重置再提示

    今天页面上一个添加列内容时,要对选择内容与之前已有选项内容作对比,防止用户重复选择内容 页面HTML代码 <ul class="list-group xj-list-NObor xj- ...

随机推荐

  1. Fiddler工具的基本功能（转）

    Fiddler是一款用于网页数据分析,抓取的工具,里面集成了对网页强大的功能外,还可以通过设置,使其对手机的数据也可以进行抓取 Fiddler的原理是: 通过在客户端和服务器之间创建一个代理服务器来对 ...

  2. POJ--2289--Jamie&#39;s Contact Groups【二分图的多个匹配+二分法答案】

    链接:id=2289">http://poj.org/problem?id=2289 意甲冠军:有n个人,m个分组,每一个人能够分配到一些组别.问怎样分能使得人数最多的组别人数最少. ...

  3. UVA 193 Graph Coloring 图染色 DFS 数据

    题意:图上的点染色,给出的边的两个点不能都染成黑色,问最多可以染多少黑色. 很水的一题,用dfs回溯即可.先判断和当前点相连的点是否染成黑色,看这一点是否能染黑色,能染色就分染成黑色和白色两种情况递归 ...

  4. Java多线程的~~~synchronized加入参数，以实现独立片段

    有时候,我们不希望在整个方法的前面加上synchronized这个keyword.这将使整个方法调用变得缓慢,我们只是重点 代码的地方添加这个synchronized这个keyword,然后这样就能加 ...

  5. 利用System.Net.Mail 的SmtpClient发送邮件

    原文:利用System.Net.Mail 的SmtpClient发送邮件 几个月前总结过关于Jmail发送邮件,当时用Jmail发送邮件发送速度有点慢(可能对Jmail了解不是很多).现在改为用微软提 ...

  6. CodeIgniter入门——HelloWorld

    原文:CodeIgniter入门--HelloWorld CodeIgniter(CI)是一套给PHP网站开发者使用的应用程序开发框架和工具包. 初次接触,来一个HelloWorld~~~ ^_^ 准 ...

  7. 怪异php 语法, 求解！

    查找php馍用来推断是否串串返回值和方法 strpos很奇怪． 请看下面的语句: echo "A1: ".(strpos("csd","c" ...

  8. 谈论Hibernate级联删除——JPA根据Hibernate实现许多级联删除CascadeType.DELETE_ORPHAN

    声明: 1.这篇文章是原创.非复制或转载过来. 2.在本文中,参数都亲自做过实验证明. 3.这篇文章谈到了Hibernate配置基于注释的方法.hbm语法不可用. 不清JPA.Hibernate.EJ ...

  9. 《代码的第一行——Android》封面诞生

    <代码的第一行--Android>已经上市近一个月,现在的情况是相当不错的销售,也特别感谢众多朋友的支持. 其实一本好书,假设你想卖.除了给予外力所要求的内容.封面设计是至关重要的,这本书 ...

  10. ReactJS-render

    ReactJS分析之入口函数render ReactJS分析之入口函数render   前言 在使用React进行构建应用时,我们总会有一个步骤将组建或者虚拟DOM元素渲染到真实的DOM上,将任务交给 ...