转：jQuery弹出二级菜单
<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弹出二级菜单的更多相关文章
- 纯css实现鼠标感应弹出二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【咸鱼教程】一个简单的弹出二级菜单UIPopupMenu
一. 实际效果 演示地址 二.实现原理主要用Button+List组件,和遮罩实现. 1. 点击Button时,将List下移展开.2. 再次点击Button,或者选中List中的某一项时,将List ...
- jQuery弹出深色系层菜单
低调奢华jQuery弹出层菜单,使用新版的jQuery库,兼容多种浏览器.Demo展示: http://hovertree.com/texiao/layer/3/ 本特效可以作为网站的引导页,使用jQ ...
- jQuery弹出窗口完整代码
jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...
- WPF：设置弹出子菜单的是否可用状态及效果
需求: 设置弹出子菜单(二级)项仅首项可用,其他项均不可用:不可用是呈灰色效果. 注: 菜单项都是依据层级数据模板.具体格式如下: StackBlock{TextBlock{Image}.TextBl ...
- jQuery弹出提示信息简洁版（自动消失）
之前看了有一些现成的blockUI.Boxy.tipswindow等的jQuery弹出层插件,可是我的要求并不高,只需要在保存后弹出提示信息即可,至于复杂点的弹出层-可以编辑的,我是直接用bootst ...
- EditorGUILayout.EnumPopup 枚举弹出选择菜单
http://www.unity蛮牛.com/thread-25490-1-1.html http://www.unity蛮牛.com/m/Script/EditorGUILayout.EnumPop ...
- jquery弹出关闭遮罩层实例
jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" & ...
- JQuery弹出层，实现弹层切换，可显示可隐藏。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
随机推荐
- Qt5+VS2012编程
安装配置 http://www.bogotobogo.com/Qt/Qt5_Visual_Studio_Add_in.php Qt5+GL http://qt-project.org/doc/qt-5 ...
- ie6下absolute:fixed问题，完美兼容
普通css代码 .fix_foot{height: 30px; background: #ff0000; position: %; z-index:;} ie6兼容代码 * html,* html b ...
- Linux--文件查找命令
一.简介查找文件的几个命令: 1.which :查找可执行文件的位置 2.whereis:查找文件的位置,可以找到可执行命令和man page 3.locate:配合数据库查看文件位置 4.find: ...
- C#使用百度API通过IP获取地理位置和坐标
百度接口相关说明:http://developer.baidu.com/map/ip-location-api.htm 返回是json格式,首先构建相关反系列化类: #region AddressFo ...
- ReSharper 配置及用法(转)
1:安装后,Resharper会用他自己的英文智能提示,替换掉 vs2010的智能提示,所以我们要换回到vs2010的智能提示 2:快捷键.是使用vs2010的快捷键还是使用 Resharper的快捷 ...
- asp.net mvc 在View中获取Url参数的值
如果url是 /home/index?id=3 直接Request就ok. 但是如果路由设定为:{controller}/{action}/{id} url是 /home/index/3 这时想在 ...
- MongoDB 3.0.6 安装 增删改查
下载 安装包MSI http://yunpan.cn/cmhHdTPkXZRM2 访问密码 9b6c 上边提供的是 MongoDB 3.0.6 64Bit 的安装包 安装 如果不想直接安装在C盘.. ...
- 缓存 HttpContext.Current.Cache和HttpRuntime.Cache的区别
先看MSDN上的解释: HttpContext.Current.Cache:为当前 HTTP 请求获取Cache对象. HttpRuntime.Cache:获取当前应用程序的Cache. 我们再用. ...
- Ajax异步刷新地址栏
公司项目后台使用现成的UI框架,DevExpress,jqGrid,XXXUI之类的,这些展示数据列表的控件/插件,基本是异步的. 这倒也好,有变化也只是数据那一块变化,不会重新加载整个页面. 但是, ...
- 关于标准C语言的预定义宏【转】
标准C语言预处理要求定义某些对象宏,每个预定义宏的名称一两个下划线字符开头和结尾,这些预定义宏不能被取消定义(#undef)或由编程人员重新定义.下面预定义宏表,被我抄了下来. __LINE__ 当 ...