<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. iOS后台播放

    ### 音乐后台播放 * .当程序进入后台的时候,开启后台任务 ``` - (void)applicationDidEnterBackground:(UIApplication *) { // 开启后 ...

  2. 浅谈JavaScript原型对象与相关设计模式

    引言 本文先从介绍JavaScript中基本的几种设计模式开始,最后引出原型对象,然后对原型对象有一个较全面的介绍. 1.创建对象的几种设计模式 A.工厂模式 我们知道在JavaScript中创建对象 ...

  3. fopen()和fclose()的用法

    fopen()和fclose()的用法 1．fopen()函数的用法 fopen函数用于打开文件, 其调用格式为: FILE *fopen(char *filename, *type); fopen( ...

  4. Win8/Win10无法打开这个应用 内置管理员账户

    现在装win10系统的同伴越来越多了,相比于win7,win10在某些设置方面也有些变化,比如我们在使用win8或者win10时,会碰到如图所示的对话框: Windows10/Windows8无法使用 ...

  5. PHP单一入口apache配置和去除index.php

    index : index在互联网上表示网站的默认主页. 一般为 index.html index.htm index.asp index.php: 另外的默认主页也多用default.html;de ...

  6. poj3254 Corn Fields （状压DP）

    http://poj.org/problem?id=3254 Corn Fields Time Limit: 2000MS   Memory Limit: 65536K Total Submissio ...

  7. 使用DOS比较两个txt文件的差异

    将两个文件放入到同一个文件夹下 DOS下提供了FC命令 点击开始->运行->输入cmd,进入DOS下,进入指定目录,输入FC a.txt b.txt进行比较,下面会显示出之间的差异

  8. objective-c与c++的差异

    oc的编译指令为 clang -fobjc-arc -framework Foundation test.m -o test oc中,1表示YES,0表示NO.并不是非0值都是YES,这是因为BOOL ...

  9. solr6.1-----solrJ 程序管理索引库

    solrJ 是solr 提供的一个客户端,就是一个jar 包,把jar 添加到工程中整合solr 服务. 所需jar 包 D:\solr-6.1.0\dist 下面的 solr-solrj-6.1.0 ...

  10. 从Google开源RE2库学习到的C++测试方案

    最近因为科研需求,一直在研究Google的开源RE2库(正则表达式识别库),库源码体积庞大,用C++写的,对于我这个以前专供Java的人来说真的是一件很痛苦的事,每天只能啃一点点.今天研究了下里面用到 ...