<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="jquery-1.7.1.min.js"></script>
<style>
*{ margin:0; padding:0; border:0;}
body{ font-family: arial, 宋体, serif; font-size:12px;}
#nav{ width:180px; line-height: 24px; list-style-type: none;text-align:left;}
#nav span{ width:160px; display:block; padding-left:20px; cursor:pointer;}
#nav li{ background:#ccc; border-bottom:#fff 1px solid; float:left;display:inline;} #nav a:link, #nav a:visited{ color:#666; text-decoration:none;}/*灰黑色*/
#nav a:hover{ color:#fff ;text-decoration:none; font-weight:bold;}/*白色*/ #nav li dl{ list-style:none; text-align:left; border-top:1px solid #fff;}
#nav li dl dd{ background:#ebebeb; border-bottom:#fff 1px solid;}/*灰白色,白色*/
#nav li dl a{ padding-left:20px; width:160px; display:block;}
#parent{ width:300px; padding-left:20px;}
.dis{ display:none;}
.ondis{ display:block;}
.onhover{ background:#009900; color:#fff;}/*绿色,白色*/
.linkhover{ background:#cc0000; color:#fff;}/*红色,白色*/
.active{ background:#00ccff; color:#666666;}/*蓝色,灰黑色*/ </style>
<script>
$(function(){
$("#nav li").each(
function(){
$(this).children("dl").addClass("dis");// $(this).children()是li的所有子元素,包括span,dl,这里隐藏其dl子元素
$(this).children().click(//设置当前li的所有子元素的点击事件
function(){$(this).next().toggle("normal");} //$(this)是当前li的子元素,如span,dl等
);
$(this).click(function(){
$('#nav li').each(function(){$(this).find("span").removeClass();});//去掉所有li的span元素的样式,
$(this).find('span').addClass("onhover");//设置当前li的span元素样式
});
});
})
$(function(){$("#nav dl dd").hover(function(){$(this).children().addClass("linkhover");},function(){$(this).children().removeClass("linkhover")});}) </script>
<title>jquery弹出二级菜单</title>
</head>
<body>
<div id="parent">
<ul id="nav">
<li id="li"><span>frist nav1</span>
<dl>
<dd><a href="http://down.php100.com">subnav1 menu1</a></dd>
<dd><a href="#">subnav1 menu2</a></dd>
<dd><a href="#">subnav1 menu3</a></dd>
<dd><a href="#">subnav1 menu4</a></dd>
</dl>
</li>
<li><span>frist nav2</span>
<dl>
<dd><a href="http://www.php100.com">subnav2 menu1</a></dd>
<dd><a href="#">subnav2 menu2</a></dd>
<dd><a href="#">subnav2 menu3</a></dd>
<dd><a href="#">subnav2 menu4</a></dd>
</dl>
</li>
<li><span>frist nav3</span>
<dl>
<dd><a href="#">subnav3 menu1</a></dd>
<dd><a href="#">subnav3 menu2</a></dd>
<dd><a href="#">subnav3 menu3</a></dd>
<dd><a href="#">subnav3 menu4</a></dd>
</dl>
</li>
<li><span>frist nav4</span>
<dl>
<dd><a href="http://mb.php100.com">subnav4 menu1</a></dd>
<dd><a href="#">subnav4 menu2</a></dd>
<dd><a href="#">subnav4 menu3</a></dd>
<dd><a href="#">subnav4 menu4</a></dd>
</dl>
</li>
</ul>
</div>
</body>
</html>

转自:http://www.bkjia.com/jQuery/449336.html

另一个例子:http://www.93diy.com/a/JS/menu/2013/0110/146.html(非常好的例子)

关于用css实现导航栏菜单的水平横向并列,用<li><a></li><li><a></li>来写,并且将li添加以下样式即可:

float: left;
list-style: none;

注意,要写实现水平并列,li元素内不能包含块元素,如div,和display:block的span,否则会产生换行。

转:jQuery弹出二级菜单的更多相关文章

  1. 纯css实现鼠标感应弹出二级菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 【咸鱼教程】一个简单的弹出二级菜单UIPopupMenu

    一. 实际效果 演示地址 二.实现原理主要用Button+List组件,和遮罩实现. 1. 点击Button时,将List下移展开.2. 再次点击Button,或者选中List中的某一项时,将List ...

  3. jQuery弹出深色系层菜单

    低调奢华jQuery弹出层菜单,使用新版的jQuery库,兼容多种浏览器.Demo展示: http://hovertree.com/texiao/layer/3/ 本特效可以作为网站的引导页,使用jQ ...

  4. jQuery弹出窗口完整代码

    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...

  5. WPF:设置弹出子菜单的是否可用状态及效果

    需求: 设置弹出子菜单(二级)项仅首项可用,其他项均不可用:不可用是呈灰色效果. 注: 菜单项都是依据层级数据模板.具体格式如下: StackBlock{TextBlock{Image}.TextBl ...

  6. jQuery弹出提示信息简洁版(自动消失)

    之前看了有一些现成的blockUI.Boxy.tipswindow等的jQuery弹出层插件,可是我的要求并不高,只需要在保存后弹出提示信息即可,至于复杂点的弹出层-可以编辑的,我是直接用bootst ...

  7. EditorGUILayout.EnumPopup 枚举弹出选择菜单

    http://www.unity蛮牛.com/thread-25490-1-1.html http://www.unity蛮牛.com/m/Script/EditorGUILayout.EnumPop ...

  8. jquery弹出关闭遮罩层实例

    jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" & ...

  9. JQuery弹出层,实现弹层切换,可显示可隐藏。

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

随机推荐

  1. yourphp基本语句

    实例化页面代码 1.时间代码:{$vo.createtime|toDate=###,'Y-m-d H:i:s'} 2.连接:{:U('Pro/arr')},{:URL()} 如:<form ac ...

  2. html5 摄像头的调用

    <!DOCTYPE html> <html> <head> <title>摄像头调用</title> <meta name=" ...

  3. php引入lucene方法

    在引入Lucene之前,先说下PHP JAVA Bridge的概念: PHP JAVA Bridge:就是在PHP和Java之间搭建一座桥梁,利用这座桥梁在这两个实体之间建立起一个沟通渠道,在这座桥梁 ...

  4. ASP.NET MVC WebGrid – Performing true AJAX pagination and sorting 【转】

    ASP.NET MVC WebGrid – Performing true AJAX pagination and sorting FEBRUARY 27, 2012 14 COMMENTS WebG ...

  5. C#中(int)a和Convert.ToInt32(a)有什么区别

    首先,在 C# 中,int 其实就是 System.Int32,即都是32位的. 其次,(int) 和 Convert.ToInt32 是两个不同的概念,前者是类型转换,而后者则是内容转换,它们并不总 ...

  6. eclipse-4.4.2安装Groovy插件(其他版本eclipse可参考)

    步骤 : 1.启动eclipse,点击help -> Install New Software... 在弹出的窗口中点击:Add... Groovy插件的地址:http://dist.sprin ...

  7. CF460C Present (二分 + 差分数列)

    Codeforces Round #262 (Div. 2) C C - Present C. Present time limit per test 2 seconds memory limit p ...

  8. 【活动】不用买书,不用花钱,可以免费看HTML5入门连载了

    清华大学出版社推出的<HTML 5网页开发实例详解>适合HTML 5开发初学者和前端开发工程师.本书一经上市,就获得了读者的一致好评,为感谢读者,推出本书的连载活动.   本书术新颖.与时 ...

  9. ThinkPHP3.2.3 安装教程

    本文以  Windows  平台为例 安装前准备:Windows操作系统的电脑,php编程环境(配置好了Apache.MySql.php).推荐wampserver.               待安 ...

  10. Mahout 的安装

    Mahout 的安装 Mahout是Hadoop的一种高级应用.运行Mahout需要提前安装好Hadoop,Mahout只在Hadoop集群的NameNode节点上安装一个即可,其他数据节点上不需要安 ...