首先列出的是jQuery纵横向菜单的效果的演示
<html><head><title>JQuery纵横向菜单效果</title><scripttype="text/javascript"src=../../"jquery-1.7.1.js"></script><styletype="text/css">UL,LI{list-style:none;//去掉小圆点 }UL{padding:0;margin:0;//清除子菜单缩进,但IE浏览器不能缩进 }.mainMenu,.crossMenu{/**主菜单样式*/ width:70px;font-size:12px;//主菜单宽度//字体大小12px background-image:url(../../resources/images/title.gif);background-repeat:repeat-x;//添加背景图片//背景图横向重复 }LI{background-color:#EEEEEE;//子菜单样式：背景色 }A{text-decoration:none;//取消链接的下划线 padding-left:15px;//子菜单缩进 /** *让连接充满区域,及菜单边缘也可以点击 *问题：若值为block,则IE会出现问题,不能填充,且子菜单会变样 *问题：因此我们用inline解决,但是不能解决填充,因此加上宽度(70-15) */ display:block;display:inline;width:70px;padding-top:3px;padding-bottom:3px;//给所有的链接加3个像素的上边距和下边距 }.mainMenuA,.crossMenuA{color:blue;background-position:2pxcenter;//主菜单链接为蓝色//背景箭头的位置 background-image:url(../../resources/images/collapsed.gif);background-repeat:no-repeat;//链接背景图片//背景图不重复 }.mainMenuLIA,.crossMenuLIA{color:green;background-image:none;//子菜单链接文字为绿色//去掉子菜单背景箭头 }.mainMenuUL,.crossMenuUL{display:none;//主菜单下的UL全部隐藏 }.crossMenu{font-size:12px;float:left;//字体大小12px//横向排列 }</style><scripttype="text/javascript">$(function(){$('.mainMenu>a').click( function(){//这样取到的就是：<ahref="#">机构管理</a>。而非：<ahref="#">添加机构</a> varchildMenu=$(this).next('ul');//找到主菜单项的子菜单项 childMenu.slideToggle();//改方法可以省去判断元素是否显示的过程，直接令隐藏的元素显示，令显示的元素隐藏 changeIcon($(this));});$('.crossMenu').hover( function(){$(this).children('ul').slideToggle();changeIcon($(this).children('a'));});}); functionchangeIcon(mainNode){//修改主菜单的指示图标 if(mainNode){ if(mainNode.css('background-image').indexOf('collapsed.gif')>=0){mainNode.css('background-image','url(resources/images/expanded.gif)');}else{mainNode.css('background-image','url(resources/images/collapsed.gif)');}}}</script></head><body><ul><liclass="mainMenu"><ahref=../../"#">机构管理</a><ul><li><ahref=../../"#">添加机构</a></li><li><ahref=../../"#">修改机构</a></li><li><ahref=../../"#">查询机构</a></li></ul></li><liclass="mainMenu"><ahref=../../"#">部门管理</a><ul><li><ahref=../../"#">添加部门</a></li><li><ahref=../../"#">修改部门</a></li><li><ahref=../../"#">查询部门</a></li></ul></li><liclass="mainMenu"><ahref=../../"#">员工管理</a><ul><li><ahref=../../"#">添加员工</a></li><li><ahref=../../"#">修改员工</a></li><li><ahref=../../"#">查询员工</a></li></ul></li></ul><br/><hr/><br/><ul><liclass="crossMenu"><ahref=../../"#">机构管理</a><ul><li><ahref=../../"#">添加机构</a></li><li><ahref=../../"#">修改机构</a></li><li><ahref=../../"#">查询机构</a></li></ul></li><liclass="crossMenu"><ahref=../../"#">部门管理</a><ul><li><ahref=../../"#">添加部门</a></li><li><ahref=../../"#">修改部门</a></li><li><ahref=../../"#">查询部门</a></li></ul></li><liclass="crossMenu"><ahref=../../"#">员工管理</a><ul><li><ahref=../../"#">添加员工</a></li><li><ahref=../../"#">修改员工</a></li><li><ahref=../../"#">查询员工</a></li></ul></li></ul></body></html> 下面是jQuery浮层效果的演示 <html><head><title>jQuery浮层效果</title><scriptsrc=../../"jquery-1.7.1.js"type="text/javascript"></script><styletype="text/css">.wrapper{width:450px;border:1pxsolid#ccc;padding:50px;margin:0auto;clear:both;} #dialogLayer{position:absolute;background-color:#000;filter:alpha(opacity=60);opacity:0.6;left:0;top:0;} #dialogBox{position:absolute;width:400px;height:300px;border:3pxsolidblue;background-color:#fff;left:0;top:0;} #dialogBoxh2{height25px;line-height:25px;color:#fff;font-size:12px;background-color:blue;margin:0px;padding:0px;} #dialogBoxh2span{float:right;font-weight:normal;cursor:pointer;} .content{padding:10px;text-align:center;}</style><scripttype="text/javascript">$(function(){ vardialogLayer=$('#dialogLayer'); vardialogBox=$('#dialogBox');dialogLayer.hide();dialogBox.hide(); varpageH=$(document.body).height(); varpageW=$(document.body).width(); varwinH=$(window).height(); varmaxH=Math.max(winH,pageH);$(':button').click(function(){/* $.ajax({type:'GET', url:'web/getQuickPayOpenDetail.action', data:'phoneNo=<%=request.getParameter("phoneNo")%>', dataType:'text', success:function(returnedData){ if("notCustomQuickPay"==returnedData){ dialogLayer.show().width(pageW).height(maxH); dialogBox.show().css({'top':'80px','left':'80px'}); }elseif("JFB_System_Busy"==returnedData){ window.location='${pageContext.request.contextPath}/JFB_System_Busy.jsp'; }else{ window.location='<%=JFBUtils.getPropertiesFileValue("global.properties","ElecChnl.WEB.BoundResponse")%>'+returnedData; } } }); */ dialogLayer.show().width(pageW).height(maxH);//dialogBox.show().css({'top':'100px','left':'100px'}); vardialogBox_x=(pageW-dialogBox.width())/2; vardialogBox_y=(winH-dialogBox.height())/2;dialogBox.show().css({'top':dialogBox_y+'px','left':dialogBox_x+'px'});});$('#close').click(function(){dialogBox.hide();dialogLayer.hide();});});</script></head><body><divid="dialogLayer"></div><divid="dialogBox"><h2><spanid="close"title="关闭">关闭 </span>请您 登录</h2><divclass="content">content</div></div><divclass="wrapper"><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p><divstyle="text-align:center;"><inputtype="button"value="点击弹出登陆框"/></div></div></body></html> 相关资源：jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】